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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容