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

当在渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。 完全符合我们场景，所以在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

的错误时我们重新渲染目标页面，这种实现明显更简单和友好。

后续如果发现了导致

Loading chunk {n} failed

的本质原因会再更新本文，欢迎关注！