关于Error: Loading chunk 7 failed.报错解决方法总结

3,033 阅读1分钟

开始遇见这种问题,迷茫各种网上查找资料。

vconsole报错

image.png

解决方案1:router.onError(callback)

需要给路由加一个错误的回调方法,在监听到路由报错之后进行页面刷新操作,这时就可以获取到当前最新的代码来解决报错问题:

  • 错误在一个路由守卫函数中被同步抛出;
  • 错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理;
  • 渲染一个路由的过程中,需要尝试解析一个异步组件时发生错误。 具体解决代码:
  1. router.onError((error) => {
  2. const pattern = /Loading chunk (\d)+ failed/g;
  3. const isChunkLoadFailed = error.message.match(pattern);
  4. const targetPath = router.history.pending.fullPath;
  5. if (isChunkLoadFailed) {router.replace(targetPath);}
  6. }); `

解决方案2:修改assetsPublicPath

将config.index.js 下的 assetsPublicPath 修改为: assetsPublicPath: '/',【访问打包后的静态资源,默认是相对于根 /】 这种形式主要针对直接把dist文件夹当成根来配置域名。
最后尝试过后两种形式都没有解决我的问题。

解决方案3:修改assetsPublicPath 修改为:项目的路径下的绝对路径

如:assetsPublicPath: '/ued-display/', 项目路径是这样的eplatdev.baocloud.cn/ued-display/RocComponent/button 静态资源路径是在ued-display下 完美解决问题。
【知识点】:

  • assetsRoot : 在当前目录的上一级 的 dist目录下输出资源文件
  • assetsSubDirectory: 把所有的静态资源打包到 dist下的 assets文件夹下
  • assetsPublicPath :代表生成的index.html文件,里面引入资源时,路径前面要加上 /ued-display/,也就是assetsPublicPath的值是绝对路径

第一次在掘金上分享内容,排版和内容有些许不太完善。请大家多多原谅,希望写的文章对大家有些许的帮助