Loading chunk (\d)+ failed 错误方案

sunly_

已于 2022-03-10 16:09:58 修改

阅读量5.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue2 BUG 文章标签： vue

于 2020-01-10 14:35:22 首次发布

本文链接：https://blog.csdn.net/qq_40745143/article/details/103923957

vue2 同时被 2 个专栏收录

74 篇文章

订阅专栏

BUG

11 篇文章

订阅专栏

本文针对Vue项目中出现的Loading chunk(n) failed问题提供了解决方案。在修改需求后，部分测试环境下出现页面崩溃，通过引入vue-router的错误处理函数onError，成功解决了这一偶发但严重的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

已经上线的项目在正式服运行正常，过了一段时间需要改需求，放在测试上一跑一直报错，并且是4个人测试时，两台电脑没问题，运行正常，另外两个人一直出这个错误。
在这里插入图片描述
百度了一下，网上有很多关于这个问题的修改方式。也有说是因为使用路由懒加载的原因。
这个问题出现概率比较小但是一旦出现就会导致页面崩溃，参考了网上众多大佬的文章，最后采用vue-router的错误处理函数 onError解决问题

// 在router.js 添加此段代码解决问题
// 解决Loading chunk (\d)+ failed问题
router.onError((error) => {
    const pattern = /Loading chunk (\d)+ failed/g;
    const isChunkLoadFailed = error.message.match(pattern);
    if (isChunkLoadFailed) {
        // 用路由的replace方法，并没有相当于F5刷新页面，失败的js文件并没有从新请求，会导致一直尝试replace页面导致死循环，而用 location.reload 方法，相当于触发F5刷新页面，虽然用户体验上来说会有刷新加载察觉，但不会导致页面卡死及死循环，从而曲线救国解决该问题
        location.reload();
        // const targetPath = $router.history.pending.fullPath;
        // $router.replace(targetPath);
    }
});
export default router;