ChunkLoadError: Loading chunk {n} failed.

问题描述

偶现路由切换，控制台报错 ChunkLoadError: Loading chunk {n} failed.

问题分析

可能是远程资源更新，浏览器缓存，出现静态资源不一致等原因造成的

简易版解决办法

router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g;
  const isChunkLoadFailed = error.message.match(pattern);
  const targetPath = router.history.pending.fullPath;
  if (isChunkLoadFailed) {
    router.replace(targetPath);
  }
})

参考链接🔗

https://www.novenn.com/webpack%E4%B9%8BLoading-chunk-x-failed/
https://www.pengsifan.com/2020/12/01/Loading%20chunk%20%7Bn%7D%20failed/