Vue点击跳转无反应，报错Loading chunk chunk-xxxxx failed

现象描述：系统升级后，偶尔出现切换菜单无响应情况，手动刷新界面后恢复正常，报错信息如图所示

20200812094521647.png

原因分析：项目中使用了路由懒加载，每次发版且未手动刷新界面，点击菜单时，对应的文件在服务器端已被删除，此时就出现了点击菜单无反应的情况

解决方法：1.不采用懒加载路由

2.监听路由错误，正则匹配对应的错误消息后，自动刷新界面，代码如下

router.onError((error) => {
  const pattern = /Loading chunk chunk-(.*)+ failed/g;
  const isChunkLoadFailed = error.message.match(pattern);
  if (isChunkLoadFailed) {
    Message({
      message: '系统已升级，正在刷新本地存储，请稍候...',
      type: 'warning',
      duration: 1500,
      offset: 60
    });
    location.reload();
  }
});

转载自https://blog.csdn.net/qq_39364032/article/details/107950474