线上项目路由跳转报错 Loading chunk failed

场景：

线上PC端项目点击左侧路由菜单栏进行页面跳转时点击无反应并报错 Loading chunk  failed

原因：

经查阅资料找出原因：项目使用了路由懒加载！！！

       路由懒加载的情况下，访问当前应用进行路由跳转时都是实时动态的从服务器上拉取相应模块的js文件，这时候我们改完代码打包上线，js文件名更换了，路由跳转的时候由于页面并未刷新，所以还是访问的原来的文件名，这是就会出现找不到模块的错误。 路由异步加载组件报错，这个错误来源 webpack 进行 code spilt 之后某些 bundle 文件 lazy loading 失败。

解决办法：

方法1：不使用路由懒加载，但大型项目路由过多，不方便修改；

方法2：使用 router.onError() 方法

该方法官方文档有给出解释：当在渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。 完全符合我们场景。

在min.js中添加如下代码：

import router from "./router";
/* 路由异常错误处理，尝试解析一个异步组件时发生错误，重新渲染目标页面 */
router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g;
  const isChunkLoadFailed = error.message.match(pattern);
  const targetPath = router.history.pending.fullPath;
  console.log(targetPath)
  if (isChunkLoadFailed) {
    router.replace(targetPath);
  }
});