遇到 Loading chunk {n} failed问题不要慌

前言

最近在写个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)

注册一个回调，该回调会在路由导航过程中出错时被调用。注意被调用的错误必须是下列情形中的一种：

1. 错误在一个路由守卫函数中被同步抛出；
2. 错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理；
3. 渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。

具体解决代码：

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);
  }
});

• 将异步组件改为同步组件

该方法属于损失性能从源头上解决问题，但是不太可取

总结

• 参考至：Vue项目中出现Loading chunk {n} failed问题的解决方法