解决Vue打包后放到部署到服务器运行时出现Loading chunk * failed 错误

Posted 2021-06-09 李猫er

最近一直在捣鼓的Springboot+Vue 前后端分离项目，Vue 前端项目打包部署到nginx 服务器访问时，点击导航栏切换一直报错：

原因：路由懒加载的情况下，访问当前应用进行路由跳转时都是实时动态的从服务器上拉取相应模块的js文件，这时候我们改完代码打包上线，js文件名更换了，路由跳转的时候由于页面并未刷新，所以还是访问的原来的文件名，这是就会出现找不到模块的错误。 路由异步加载组件报错，这个错误来源 webpack 进行 code spilt 之后某些 bundle 文件 lazy loading 失败

解决方案：

• 让错误在一个路由守卫函数中被同步抛出；
• 让错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理；
• 渲染一个路由的过程中，尝试解析一个异步组件时发生错误时，重新渲染目标页面，并将异步组件改为同步组件。

在src 目录下的permission.js加入router.onError 进行处理：

渲染一个路由的过程中，尝试解析一个异步组件时发生错误时，重新渲染目标页面

router.onError(error => {
  const pattern = /Loading chunk (\\w)+ failed/g
  const isError = error.message.match(pattern)
  const targetPath = router.history.pending.fullPath
  if (isError) {
    router.replace(targetPath)
  }
})

加上之后就可以解决报错。