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);}
});

有更好的方案欢迎留言！

欢迎关注博主：小圣贤君，有问题可以留言哦！

Error: Loading chunk * failed，Vue Router懒加载报错问题解决方案相关推荐

Vue路由懒加载报错问题解决
使用Vue路由懒加载时报了以下错误: 经过百度发现,出现该问题的原因是: import 属于异步引用组件,需要特殊的babel-loader处理解决办法: 安装babel用来编译import异步引用 ...
vue 路由懒加载报错 Loading chunk * failed 组件加载不出来
跳转对应的路由,无法跳转,打开控制太发现报错,查看网络发现对应的组件没有获取到,而且获取时间只有4ms就停止获取了,谷歌不会报这样的错误,但是edge会, 解决方法(不一定有用):给请求代码套个try ...
vue-cli3+typescript+路由懒加载报错问题
vue-cli3的版本是3.4.1 出现的情况是网页显示正常,但是终端一直提示找不到模块: 如果去掉路由懒加载的方式,就没有报错: 原因是以前我们习惯直接写文件名而不加后缀, 现在使用ts时就需要写v ...
Vue 路由懒加载——介绍以及遇到的问题
使用路由懒加载的原因当打包构建应用时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. ...
Vue 图片懒加载之 Vue-Lazyload
一.什么叫懒加载通俗讲 : 懒加载就是延时加载,即当需要用到的时候再去加载. 那什么叫做需要用到的时候? 比如一个图片在没有出现在可视区域内,就已经加载当页面里了, 但只有滚动页面下方式才能看见, ...
vue图片懒加载vue-lazyload
vue图片懒加载vue-lazyload 需求描述功能实现需求描述图片过大,加载缓慢,图片懒加载,添加Loading状态,优化展示效果. 功能实现 1.安装vue-lazyload npm in ...
图片懒加载和Vue路由懒加载
图片懒加载什么是懒加载? 懒加载也叫做延迟加载或者按需加载 .在长网页中延迟加载暂时未看到的图片数据,能够优化网页性能,提高用户体验 .在较长的网页或应用中,如果图片很多,等待全部图片都被加载出来需 ...
vue路由懒加载的两种方式
1.当一个vue项目很大的时候,对于一些"暂时"用不到的组件,我们可以不进行加载,等到用到次组件时再加载.这样可以优化spa应用首次加载白屏情况,也给用户更好的体验.这样就是vue ...
vue“路由懒加载” 技术，让网页快速加载（优化篇）
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...

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

Error: Loading chunk * failed，Vue Router懒加载报错问题解决方案相关推荐

最新文章

热门文章