vue——更改路由模式为history后，刷新页面显示Cannot Get/空白/404，本地icon图标不显示等问题解决

参考：https://blog.csdn.net/william_jzy/article/details/106526339  vue设置history模式后页面刷新Cannot Get

　　    https://www.bbsmax.com/A/A7zgKEVkz4/  vue history模式下出现空白页情况

           https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90  不同的历史模式 | Vue Router

　　    https://www.cnblogs.com/brewin/p/16228534.html  vue history模式刷新页面进入404解决方案

　　　https://blog.csdn.net/Laputa_/article/details/103125219  vue的history模式刷新页面空白解决方案

　　   https://blog.51cto.com/u_15077545/3950221 vue 改为 history 路由之后 二级页面文件地址报错

 

问题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/">