Vue Router懒加载报错问题解决方案

场景：vue项目路由改成了懒加载方式，清空项目文件，重新下载配置运行后，就发现控制台报以下错误，刷新页面后，就不会再报错，应该使用路由懒加载后，组件加载异常导致的。另外，因为项目里用了懒加载，每次重新build之后有修改过的文件哈希码会改变，导致路由跳转到有修改过的页面会报页面文件404。

以下错误：

[vue-router] Failed to resolve async component default:
Error:Loading chunk 10 failed.

查阅Vue Router文档，有个错误处理函数onError，用于处理路由异常情况：

router.onError(callback)

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

• 错误在一个路由守卫函数中被同步抛出；

• 错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理；

• 渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。

解决方案：

渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。
这种情况想来应该是符合咱们的错误情况，因为刷新页面后，就不会报错，所以假设错误预想成立，那么下一步，我们在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);
  }
});