Vue打包后放到服务器出现Loading chunk {n} failed 错误

导航栏点击切换时 会出现Loading chunk {n} failed  ，刷新之后便不会出现。而且n在最新的build的文件中，n没有存在

偶然一次发现，项目更新迭代开发时上传测试环境后就会出现，当我们打包后某些js文件会改变，再上传到服务器后，由于浏览器缓存问题，用户在访问的时候还会再访问之前的js文件。就会出现Loading chunk {n} failed这种报错，

思考到了路由懒加载的情况下，访问当前应用进行路由跳转时都是实时动态的从服务器上拉取相应模块的js文件，这时候我们改完代码打包上线，js文件名更换了，路由跳转的时候由于页面并未刷新，所以还是访问的原来的文件名，这是就会出现找不到模块的错误。

解决办法：

我们需要给路由加一个错误的回调方法，在监听到路由报错之后进行页面刷新操作，这时就可以获取到当前最新的代码来解决报错问题。

/* 路由异常错误处理，尝试解析一个异步组件时发生错误，重新渲染目标页面 */
router.onError((error) => {
const pattern = /Loading chunk (\d)+ failed/g;
const isChunkLoadFailed = error.message.match(pattern);
const targetPath = router.history.pending.fullPath;
if (isChunkLoadFailed) {
router.replace(targetPath);
}
});

转载于:https://www.cnblogs.com/FACESCORE/p/11308740.html