Vue项目中出现Loading chunk {n} failed问题
zuobaiquan opened this issue · 0 comments
zuobaiquan commented
场景
vue项目重新打包发布时出现无法跳转问题。打开调试可以看见是无法找到对应的文件。
错误分析
vue打包的时候采用了路由异步加载的方式。当访问了项目的某个界面(其他界面未访问,也就是未加载资源)时,加载了打包后的index.html入口文件,入口文件中会有其他异步加载的对应包,而在重新打包后这些包的名称发生了改变,这时候重新发布了项目。而你当前已经index.html。里面有跳转对应界面所需要的文件,但是这个文件是之前版本的文件,也就是说当你跳转一个未加载资源的界面,这时候用错误的路径去加载,然后报错。
解决办法
这个的解决方案很多可以用nginx解决但是这里直接用前端解决,这样减少一次请求。
在vue-router中有一个router.onError官方说明是:注册一个回调,该回调会在路由导航过程中出错时被调用
使用这个在报错时捕获错误,重新加载资源
router.onError((error) =>{
// 这里的正则表达式可以根据实际情况下js命名来进行修改,“ (\d)+ ”只匹配数字
const pattern =/Loading chunk (\d)+ failed/g;
const isChunkLoadFailed = error.message.match(pattern);
const targetPath = router.history.pending.fullPath;
if(isChunkLoadFailed) {
router.replace(targetPath);
}
});