现象
点击菜单无反应并且控制台报错Loading chunk chunk-***** failed
具体错误现象截图如下
分析
在线上页面已经打开的情况下,重新打包部署了前端项目。每次打包,js文件的hash值都会发生改变,因为我们的路由采用了懒加载,未打开过的页面的js没有被下载引入,就会产生上述资源加载错误
解决
在路由守卫的错误回调中 筛选出上述场景 重新加载下页面即可
router.onError((error) => {
const pattern = /Loading chunk chunk-(.*)+ failed/g
const staticFilesErr = /Failed to load resource/g
const isChunkLoadFailed = error.message.match(pattern)
const isStaticFilesLoadFailed = error.message.match(staticFilesErr)
if (isChunkLoadFailed || isStaticFilesLoadFailed) {
location.reload()
}
})
如果你有类似场景或者更诡异的无法解决 也可以私信我帮助