当前位置: 代码迷 >> 综合 >> Vue项目升级后路由跳转无反应,报错Loading chunk chunk-xxxxx failed
  详细解决方案

Vue项目升级后路由跳转无反应,报错Loading chunk chunk-xxxxx failed

热度:69   发布时间:2024-02-10 00:26:03.0

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

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

解决方法: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();}
});

  相关解决方案