前言
最近在写个vue的demo,调试过程中出现个问题,vconsole中提示
[vue-router] Failed to resolve async component default:
Error:Loading chunk 10 failed.
大致意思就是路由异步加载组件的时候报错了
报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。但是这个问题的根本原因没有被找到，因为这个问题出现的偶然性太高了，而且有的手机上会出现，有的不会，用模拟器不会出现
实在找不到原因，又因为是偶发性的所以还是做容错处理解决该问题
解决方案
- 使用
router.onError
具体API地址router.onError
router.onError
router.onError(callback)
注册一个回调，该回调会在路由导航过程中出错时被调用。注意被调用的错误必须是下列情形中的一种：
错误在一个路由守卫函数中被同步抛出；
错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理；
渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。
具体解决代码：
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);
}
});
- 将异步组件改为同步组件
该方法属于损失性能从源头上解决问题，但是不太可取
