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

11 篇文章 0 订阅

已经上线的项目在正式服运行正常,过了一段时间需要改需求,放在测试上一跑一直报错,并且是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;

相关文章:
Vue项目中出现Loading chunk {n} failed问题的解决方法
github关于此问题的讨论

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值