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

发布于 / Vue

前言

最近在写个vuedemo,调试过程中出现个问题,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);
  }
});
  • 将异步组件改为同步组件

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

总结

本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可
本文链接: https://www.ahwgs.cn/loading-chunk-error.html