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);
  }
  // 当捕获到加载模块错误时，重新渲染该目标模块
})

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