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 路由之后 二级页面文件地址报错
https://segmentfault.com/q/1010000039034665 React Router 路由404,设置过historyApiFallback无效
问题1:开发环境下,刷新页面显示Cannot Get/进入自己配置的404页面
原因:
Vue是单页应用(SPA),dist下只有一个 index.html 文件及一些静态资源。index.html作为入口文件,其它的路由都是通过JS来进行跳转。
解决办法:
方法1. 在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. 本地proxy代理的接口路径为'/',会代理所有浏览器请求(包括接口请求、路由),浏览器请求找不到页面时,就会进入404页面。修改代理路径即可:
proxy: { // 指定只有接口请求/api/***时,才会被转发。如果路径为'/',路由也会被转发,导致页面404 '/api': { // <==关键 target: 'xxx', changeOrigin: true, pathRewrite: { '^/api': '' }, }, },
问题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 });
解决方法2:
在index.html 文件head中加行代码
(1)项目部署在根目录下
<base href="/">
(2)项目不是部署在根目录下
<base href="/aaa/">