Vue项目中出现Loading chunk {n} failed问题

[zuobaiquan]

 场景
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);

     }

});