報錯截圖如下
image.png
網(wǎng)上有答案說在路由文件上加下面配置解決，不過并不能解決我的問題芭挽，可能有各種因素影響。蠕趁。。
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch((err) => { return err })
}
經(jīng)過測試是因為vue項目中使用了history模式俺陋，并且項目中使用了路由懶加載，路由跳轉(zhuǎn)第一個沒問題术浪，第二個就404了寿酌。
解決方案一：不使用history模式（呵呵噠，今天我胖虎要打屎你）
顯然第一種方案不是很妥當(dāng)硕并。秧荆。。
解決方案二：使用history乙濒，不使用路由懶加載，但是刷新頁面涼涼
方案二是勉強(qiáng)可以么库，但是大人甘有，食大便了，我要history亏掀，還要路由懶加載，OK温算？OK,就有了下面的方案三
明顯看出來頁面刷新后就404了该互，是不是webpack服務(wù)沒有設(shè)置公共路徑的問題，經(jīng)過我的嘗試發(fā)現(xiàn)確實是因為webpack publicPath設(shè)置的問題
devServer
devServer: {
publicPath: '/', // 公共路徑 打包后資源可以訪問的路徑
},
output
output: { // 出口文件
path: __dirname + "/dist", // 打包后存放的地方
filename: "bundle.js", // 打包后的文件命名
publicPath: '/'
}
重要的事情說三次
devServer和output文件的publicPath要統(tǒng)一
devServer和output文件的publicPath要統(tǒng)一
devServer和output文件的publicPath要統(tǒng)一
好了蔓搞，到這里路由使用history+路由懶加載導(dǎo)致頁面404問題就完美解決了随橘，希望可以幫到各位小伙伴
