vue项目报错Error:Loading chunk {n} failed.解决

背景

上班路上产品发消息说项目报错了，某个路由页面打不开，让我尽快解决问题，报错如下图。此处省略一些字不文明的gc（xxxxxxxx）。

检查之后，本地没啥问题呀！！！可能是由于重新发版，浏览器存在缓存的原因，如果用户一直停留在页面上，此刻操作访问的还是旧的静态资源，会存在功能性的差异，切换页面时偶尔就会出现该错误。

解决方案

// 捕获到 Loading chunk {n} failed 的错误时，重新渲染目标页面
router.onError((error) => {
  const pattern = /Loading .*failed/g;
  const isChunkLoadFailed = error.message.match(pattern);
  const targetPath = router.history.pending.fullPath;
  if (isChunkLoadFailed) router.replace(targetPath);
})