报错截图如下
image.png
网上有答案说在路由文件上加下面配置解决,不过并不能解决我的问题,可能有各种因素影响。。。
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch((err) => { return err })
}
经过测试是因为vue项目中使用了history模式,并且项目中使用了路由懒加载,路由跳转第一个没问题,第二个就404了。
解决方案一:不使用history模式(呵呵哒,今天我胖虎要打屎你)
显然第一种方案不是很妥当。。。
解决方案二:使用history,不使用路由懒加载,但是刷新页面凉凉
方案二是勉强可以,但是大人,食大便了,我要history,还要路由懒加载,OK?OK,就有了下面的方案三
明显看出来页面刷新后就404了,是不是webpack服务没有设置公共路径的问题,经过我的尝试发现确实是因为webpack publicPath设置的问题
devServer
devServer: {
publicPath: '/', // 公共路径 打包后资源可以访问的路径
},
output
output: { // 出口文件
path: __dirname + "/dist", // 打包后存放的地方
filename: "bundle.js", // 打包后的文件命名
publicPath: '/'
}
重要的事情说三次
devServer和output文件的publicPath要统一
devServer和output文件的publicPath要统一
devServer和output文件的publicPath要统一
好了,到这里路由使用history+路由懒加载导致页面404问题就完美解决了,希望可以帮到各位小伙伴
网友评论