场景
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);
}
});
参考：https://segmentfault.com/a/1190000016382323?utm_source=tag-newest
