vue-router 懒加载报错 Loading chunk {n} failed

懒加载

懒加载：避免单页面应用一次性加载全部组件造成加载时间过长。 使用：

// router文件中 routes: [ { path: '/Login', name: 'Login', component: resolve => require(['@/views/Login'], resolve) } ... ]

跳转或加载路由时报错 Loading chunk {n} failed

使用懒加载会经常导致导航点击没用，加载模块出现错误 解决：在当前文件中加入vue-routerrouter的错误处理函数onError来捕获错误

const router = new Router({ // mode: 'history', routes }); 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); } // 当捕获到加载模块错误时，重新渲染该目标模块 })

用该方法处理之后，错误会依然打印，但是会成功重新渲染模块