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

原创

JavaScript菜鸟 2022-01-25 17:51:14 博主文章分类：vue ©著作权

©著作权归作者所有：来自51CTO博客作者JavaScript菜鸟的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

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