Vue项目中出现Loading chunk {n} failed问题的解决方法

最新推荐文章于 2023-02-07 15:39:01 发布

Uncle_long

最新推荐文章于 2023-02-07 15:39:01 发布

阅读量1.6w

点赞数 1

分类专栏： vue js

js 同时被 2 个专栏收录

40 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

本文探讨了Vue-router中错误处理函数onError的使用方法，通过匹配特定错误信息重新渲染页面，提供了一种更简单友好的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于项目里面用到了vue-router，vue-router的错误处理函数 onError 是不是能够捕获该错误呢？我们来看一下官方文档的说明:

当在渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。 完全符合我们场景，所以在onError方法中我们实现如下代码：

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

当捕获到Loading chunk {n} failed的错误时我们重新渲染目标页面，这种实现明显更简单和友好。

参考https://segmentfault.com/a/1190000016382323