参考：https://blog.csdn.net/william_jzy/article/details/106526339
https://www.bbsmax.com/A/A7zgKEVkz4/
https://www.cnblogs.com/brewin/p/16228534.html
https://blog.csdn.net/Laputa_/article/details/103125219
https://blog.51cto.com/u_15077545/3950221
问题1：开发环境下，刷新页面显示Cannot Get
原因：
Vue是单页应用(SPA)，dist下只有一个 index.html 文件及一些静态资源。index.html作为入口文件，其它的路由都是通过JS来进行跳转。
根据 nginx 配置，当在地址栏输入example.com 时，会打开/app/dist目录下的 index.html 文件，然后通过next({ name: "login" });或者this.$router.push({ name: "login" });可以跳转路由进入到example.com/login 但是当我们在example.com/login 页执行刷新操作时，nginx location 是没有相关配置的，所以就会出现 404 的情况。解决办法：
在webpack.config.js或vue.config.js文件中，设置devServer项中historyApiFallback
const config = {
...
devServer: {
// history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
historyApiFallback: {
index: '/index.html'
//与output的publicPath有关(HTMLplugin生成的html默认为index.html)
}
}
}
问题2：本地引入icon图标不显示
页面：
已经渲染了，图标不出现
原因：
引入icon的css样式被另外一个css覆盖了
解决方法：后引入icon的css，或者叠加层级
问题3：部署到线上后，刷新页面404
原因参照问题1
解决方法：配置nginx
(1) 项目不是部署在根目录下
location /aaa {
root home/xxx/www // 你自己的根目录地址
try_files $uri $uri/ /aaa/; // 这里的 /aaa/ 也可以写成/aaa/index.html
}
try_files这行是关键，$uri为变量，代表你访问的地址。意思大概是，如果访问aaa/文件夹下面的某个文件，找不到时就返回/aaa/下面的index.html文件。
(2) 项目部署在根目录下
location / {
root /app/dist;
try_files $uri $uri/ /index.html;
}
问题4：本地启动/部署到线上后，切换路由，资源路径不正确导致页面空白，控制台报错404、Loading chunk failed、expected expression,got '<'
原因：
hash模式下，在vue项目的浏览器会将 # 前面的内容作为根路径。
比如访问路由：http://example.com/#/home，会将http://example.com作为根路径。
而在history模式下没了 # 做分割，再加上官方文档中有这样一句话
所以在history模式下，访问路由：http://example.com/home ，会将http://example.com/home 当做根路径，这也就是造成刷新为空的主要原因。
解决方法：
配置打包路径(2.x项目是assetsPublicPath，而3.x项目是publicPath)
publicPath: "/",
或
assetsPublicPath: "/",
问题5：部署到线上后，进入二级页面，页面为空白
原因：
项目没有放在服务器根目录下，放在了服务器的nice/app下，那么打开地址是：http://123.com/nice/app
但配的路由中并没有nice/app，无法找到路径中的组件，所以也就无法渲染了。这就是导致空白的原因
解决方法1：修改router中的index.js，给路由中加一个base的属性，值为 ‘/nice/app/’就可以了。代码：
const router = new VueRouter({
mode: 'history',
base: '/nice/app/', // << 关键
routes: routers
});
记住这个base，base值两边一定要有"/"，不要写成“nice/app”、“/nice/app”或者“nice/app/”。
其次，这个文件夹是服务器放项目的文件夹，不是你本地项目的文件夹位置！！
解决方法2：
在index.html 文件head中加行代码
（1）项目部署在根目录下
<base href="/">
（2）项目不是部署在根目录下
<base href="/aaa/">
标签：index,vue,Get,app,html,nice,com,路由,icon From： https://www.cnblogs.com/linjiangxian/p/17143784.html