Error: Loading chunk * failed,Vue Router懒加载报错问题解决方案


最近vue项目路由改成了懒加载方式,刚开始并没有什么问题,清空项目文件,重新下载配置运行后,就发现控制台报以下错误:

[vue-router] Failed to resolve async component default:
Error:Loading chunk 10 failed.

刷新页面后,就不会再报错,思来想去应该使用路由懒加载后,组件加载异常导致的,但是究竟是什么原因,暂时不知,有知道的朋友可以留言。
解决方案:
Vue Router中有个错误处理函数onError,用于处理路由异常情况,请看说明:

渲染一个路由的过程中,需要尝试解析一个异步组件时发生错误。
这种情况想来应该是符合咱们的错误情况,因为刷新页面后,就不会报错,所以假设错误预想成立,那么下一步,我们在onError方法中,重新加载我们的目标页面,应该就可以解决问题。
请看方案:

/* 路由异常错误处理,尝试解析一个异步组件时发生错误,重新渲染目标页面 */

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://blog.csdn.net/zhongguohaoshaonian/article/details/95179057


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM