记一次vue history模式下的报错ChunkLoadError: Loading chunk xx failed net::ERR_ABORTED 404 (Not Found)解决方案

报错截图如下

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问题就完美解决了，希望可以帮到各位小伙伴