Vue-element-admin: 点击切换路由的时候，有时候会报错，Error: Loading chunk 1 failed. at HTMLScriptElement.d (bootstrap 7d5ba07478b35f182b62:103)

[maryrui]

只有在 打包后的线上环境会出错，用的是addRouter 动态 添加的，万分感谢楼主指导，谢谢
Error: Loading chunk 1 failed.
at HTMLScriptElement.d (bootstrap 7d5ba07478b35f182b62:103)

[PanJiaChen]

请提供更详细信息

[maryrui]

只有点击路由切换的时候会出现这种错，每次加载报错的区块都不一样（比如：Loading chunk 1 failed.||Loading chunk 2 failed.），前后台两个分开单独项目，都出现了这种问题，后台涉及权限用的是vuex 动态加载路由，前台没有使用。（所有的后端交互都是使用dispatch，会不会有影响）会不会是npm打包问题，毕竟npm经常出错

[maryrui]

这是报错的源码区域

[maryrui]

楼主自己的项目也会出现这种报错哦

[PanJiaChen]

并不能出现，你出现这个问题很多可能是缓存问题。
@maryrui 能稳定重现么？

[maryrui]

重现度还有点高，点了十几次路由就重现

[PanJiaChen]

mac chrome 我试了很久都没能重现

[luchanan]

我也遇到这个问题，然后我去运行楼主的项目，发现在登录的时候出现这个问题的几率非常高

我只改了一处config/index.js中build的

assetsPublicPath: './'
改为
assetsPublicPath: '/test/',

打包之后，你在本地运行这个打包后项目，是没有这个问题的

但是把它放在服务器的话，重现几乎90%

网址只有一个域名，所以用test文件夹作为项目区分

[luchanan]

莫名奇妙域名被注入script（非本项目）脚本，导致出错，没有就是好的

[maryrui]

@luchanan 那你解决了吗，动态加载路由确实会出现此问题，楼主的项目用mac的chrome确实不会出现此问题

[maryrui]

window chrome重现的非常高，换了同事的机子重现度也一样

[luchanan]

@maryrui，你看看你项目head有没有被注入一些奇怪的script，自从没有那被注入的script我就没有重现了，你看看是不是这个导致的，我也是用w10+chrome

[seean-chan]

也出现了同样的问题，在打包后的线上环境会出错，点击侧栏卡顿，然后过很久就报错，压面页跳转不出来。有没有什么解决方法？

[guohui666]

也是一样的问题

[Yezily]

谢谢花裤衩大佬的指导，我也出现了同样的问题，不使用动态加载有一段时间没出现，现在又出现了，
我两个项目都出现了这个问题，都引入了楼主的模板里面的部分内容，目前还没着找到具体原因，
每次出现都是点击切换路由的时候，每次出现的时候点击的路由都不一样，刷新页面就好了，本地没有过，都是打包到服务器上才有的

这是使用动态挂载路由的时候报错内容

Mr.e._withTask.i._withTask @ vendor.218c81380028c4c91648.js:12
vendor.218c81380028c4c91648.js:6 Error: Loading chunk 14 failed.
at HTMLScriptElement.i (manifest.655bda8cfcc9f5f6b104.js:1)
s @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
Promise rejected (async)
(anonymous) @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
mt @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
d @ vendor.218c81380028c4c91648.js:6
r @ vendor.218c81380028c4c91648.js:6
r @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
(anonymous) @ vendor.218c81380028c4c91648.js:6
(anonymous) @ app.31c99b36423b330e6a39.js:1
d @ vendor.218c81380028c4c91648.js:6
r @ vendor.218c81380028c4c91648.js:6
r @ vendor.218c81380028c4c91648.js:6
ht @ vendor.218c81380028c4c91648.js:6
_t.confirmTransition @ vendor.218c81380028c4c91648.js:6
_t.transitionTo @ vendor.218c81380028c4c91648.js:6
e.push @ vendor.218c81380028c4c91648.js:6
Pt.push @ vendor.218c81380028c4c91648.js:6
handleNav @ app.31c99b36423b330e6a39.js:1
click @ app.31c99b36423b330e6a39.js:1
e @ vendor.218c81380028c4c91648.js:12

这个是关掉动态挂载之后出现的报错

[TobyHong]

？

[TobyHong]

所以说现在没答案？

[TobyHong]

找到答案了，修改webpack.base里面的相关路径

[wangzz719]

@TobyHong 请问是如何解决的？

[wangzz719]

将 config.index.js 下的 assetsPublicPath 修改为：
assetsPublicPath: '/',
可以解决问题。

[Yezily]

@wangzz719 可是config.index.js 下面的assetsPublicPath 默认参数就是'/'

[TobyHong]

@Yezily 你改成./
还有下面引入elementUI有些项目也会出问题，这个也可以排查下。

[Yezily]

@TobyHong 好的 我去试试，谢了大兄弟

[qyf0310]

按将 @wangzz719 说的，把config.index.js 下的 assetsPublicPath 修改为：
assetsPublicPath: '/',
解决了

[ChasonHong]

@PanJiaChen 打包后放在服务器访问，间隔时间不等再操作，也会偶现Loading chunk 1 failed.||Loading chunk 0 failed，就是使用这个assetsPublicPath: '/',也是一样报错

[ADengrc]

上传到线上后使用公司WIFI第一次访问该文件会被替换所以报错，当我使用4G网络访问却不会报错，应该是运营商网络劫持

[sebastianleecn]

router index.js 关闭 history(需要后端支持)

export default new Router({
// mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})

[IssueHuntBot]

@0maxxam0 has funded $80.00 to this issue. See it on IssueHunt

[xyzshen]

所以现在还没有解决

@TobyHong 好的 我去试试，谢了大兄弟

'./'这种方法可行吗？

[PanJiaChen]

话说你们能稳定重现么。。我最近特意加入了这个报错的监控
报错概率很低。

[xyzshen]

话说你们能稳定重现么。。我最近特意加入了这个报错的监控
报错概率很低。

话说 每天很多次

[PanJiaChen]

确定两个问题

• 你们静态资源是 https的么？
• 是个别js这样？还是所有异步加载的chunk js 都有问题？

[xyzshen]

怎么解决呢？

[PanJiaChen]

@xyzshen 你都没回答我的问题。。。

[xyzshen]

@PanJiaChen 1:http 2: 只是导航栏

[PanJiaChen]

什么叫只是导航栏

[xyzshen]

就是切换导航栏的时候报错；其它组建不报这个错误

[PanJiaChen]

本地执行 npm run build:prod --preview 之后能重现这个问题么？

[xyzshen]

@PanJiaChen

[smile921]

也遇到这个问题了，可以肯定是打包的问题，因为统一的代码有时候打包就没问题，有时候有问题，只能重新打包，但是怎么解决还不知道根源

[ChobitsSP]

https://github.com/webpack/webpack/issues/7502

[gyxyl]

打包到测试环境之后出现这个问题，assetsPublicPath参数默认是/，后来想起自己不是用的npm源打包的，切换成npm源之后就好了

[Tingoo]

我们也遇到同样的问题，最后发现是运营商劫持（联通）

[mia330]

打开线上的报的,请问大家解决了吗?

[musi1024]

没有呢

[cxxly]

+1

[lzzhanglin]

ws改了assetsPublicPath 就默认的 不加点 就没问题了

[mia330]

@lzzhanglin 本来就没有点啊

[lzzhanglin]

@lzzhanglin 本来就没有点啊

那我就不清楚了 反正我是取消那个点就没有问题了

[17khba]

复现步骤：loading * chunk failed

解决方案，未测试（参考链接里的回答）：

// main.js
router.onError(err => {
  const pattern = /^Loading chunk (\d)+ failed\./;
  const isChunkLoadingFailed = pattern.test(err.message);

  if (isChunkLoadingFailed) {
    Message({
      type: 'error',
      message: '服务器版本已更新，正在刷新本地缓存，请稍后...',
      duration: 4000
    })

    window.location.replace(window.location.href);
  }

  console.log('出错了', err);
})

@PanJiaChen

[StinsonZhao]

偶发性原因：

1. 新版本部署前，有用户正在你的网页中
2. 然后你部署了新版本，而且是顶替原有资源，比如 hash 为 bgt78d 的资源不见了
3. 这时用户在他现有的页面中进行路由切换，前端路由切换
4. 这不会触发去重现获取 html，所以老的 html 中的 chunk 信息生效
5. 这个时候如果访问已经访问过的路由，这些路由中的 chunk 已经被浏览器缓存，路由（页面）能正常，虽然它可能使用的是过时的资源（就你上一个版本发布的资源）
6. 但是当请求之前没有请求过的路由，因为懒加载的关系，这些路由对应的组件 chunk 没有缓存，根据老的 chunk 对应信息，去请求老的静态资源，而老的静态资源又已经由于你的部署顶替掉了，于是出现找不到的问题
7. 刷新就可以，因为刷新重现获取了一遍 html 文档，chunk 对应信息也就刷新了

---

简单解决思路：

上面也提到了刷新页面，但是仅仅捕获到错误就刷新，很可能出现死循环
所以结合重试次数和重试间隔来重试会比较好

## 更好的解决思路：

• 构建的时候静态资源路径带上版本信息，这个有很多方法
  
  
  
  • 比如路径中携带，比如原来请求 /static/js/balabal.[hash].js，现在/[version]/static/balabal.[hash].js
  
  
• 部署的时候不用顶替部署，而是保留老版本，有很多方式，比如
  
  
  
  • 如果是裸机部署，可以在 web 服务器根目录下，新建 version 对应的目录，然后部署到这个目录
  
  
  • 如果是 docker 容器顶替部署，可以在构建前端的时候将前端资源打成 tar 包上传到某个地方，这样在打包新版本的 docker 镜像的时候，可以拉取上一个版本的 tar 包，也打包到镜像中，这样 docker 中也能有两个版本的资源，通过版本路径区分下
  
  
• 这样的情况下，原有页面的用户还是会访问到老的资源，虽然可能版本落后，但是不会出错，部署后新打开的页面就会访问新的资源

PS.如果不想暴露 version，可以把 version 做一个 hash 或者混淆

[thinkerou]

关闭浏览器，重新启动进入就好了

[LeeeMooo]

mark一下

[mstcyj]

还有别的更好的方法解决这个问题吗？请大佬只招。

[rainydayDY]

偶发性原因：

1. 新版本部署前，有用户正在你的网页中
2. 然后你部署了新版本，而且是顶替原有资源，比如 hash 为 bgt78d 的资源不见了
3. 这时用户在他现有的页面中进行路由切换，前端路由切换
4. 这不会触发去重现获取 html，所以老的 html 中的 chunk 信息生效
5. 这个时候如果访问已经访问过的路由，这些路由中的 chunk 已经被浏览器缓存，路由（页面）能正常，虽然它可能使用的是过时的资源（就你上一个版本发布的资源）
6. 但是当请求之前没有请求过的路由，因为懒加载的关系，这些路由对应的组件 chunk 没有缓存，根据老的 chunk 对应信息，去请求老的静态资源，而老的静态资源又已经由于你的部署顶替掉了，于是出现找不到的问题
7. 刷新就可以，因为刷新重现获取了一遍 html 文档，chunk 对应信息也就刷新了

简单解决思路：

上面也提到了刷新页面，但是仅仅捕获到错误就刷新，很可能出现死循环
所以结合重试次数和重试间隔来重试会比较好

更好的解决思路：

• 构建的时候静态资源路径带上版本信息，这个有很多方法

  • 比如路径中携带，比如原来请求 /static/js/balabal.[hash].js，现在/[version]/static/balabal.[hash].js

• 部署的时候不用顶替部署，而是保留老版本，有很多方式，比如

  • 如果是裸机部署，可以在 web 服务器根目录下，新建 version 对应的目录，然后部署到这个目录
  • 如果是 docker 容器顶替部署，可以在构建前端的时候将前端资源打成 tar 包上传到某个地方，这样在打包新版本的 docker 镜像的时候，可以拉取上一个版本的 tar 包，也打包到镜像中，这样 docker 中也能有两个版本的资源，通过版本路径区分下
• 这样的情况下，原有页面的用户还是会访问到老的资源，虽然可能版本落后，但是不会出错，部署后新打开的页面就会访问新的资源

PS.如果不想暴露 version，可以把 version 做一个 hash 或者混淆

可是你这样缓存就失效了

[rainydayDY]

其实不只是这个项目会出现这样的问题，只要用到动态加载的基本就都会有，不是顶替部署的情况下也有，使用contenthash,namechunk，部署到cdn，用户使用旧的manifest，拉取旧的资源，按理不会因为chunkId对应不上load失败，使用新的manifest，拉取新的资源也没问题，但是就是会loadchunk失败，有三种类型，error missing timeout，至今无解

[zuoakang]

我觉得这个文章的结尾评论说得有道理：https://segmentfault.com/a/1190000016382323

• 以下是引用

这个通常是由于webpack打包重命名了改动过的css和js文件，并且删除了原有的文件，然后有两种场景：
1.用户正在浏览页面时你发包了，并且你启用了懒加载，这个时候用户的html文件中的js和css名称就和你服务器上的不一致，导致这个错误
2.用户浏览器有html的缓存，这种情况不管是否启用懒加载，都会有这个问题

[ctq123]

求解决方法

[15001217168]

求解决方法

[han88829]

最近问题出现挺频繁的，使用js刷新无效，如果放弃缓存体验又太差，至今还无完美的解决方案

[wxy1995]

我们也遇到同样的问题，最后发现是运营商劫持（联通）

请问如何排查到的呢

[zyz954489346]

同样的问题，尝试过github上面webpack-retry-chunk-load-plugin插件，可以针对js文件拉取error自动retry，少量解决了问题，但依然存在Loading CSS chunk 22 failed及Loading chunk 0 failed，前端盲目捕获error然后reload是极不可取的，目前没有上cdn，不知道上cdn之后还会不会出现类似问题。

[novenn]

可能是数据数据劫持的问题
看这个连接

[novenn]

同样的问题，尝试过github上面webpack-retry-chunk-load-plugin插件，可以针对js文件拉取error自动retry，少量解决了问题，但依然存在Loading CSS chunk 22 failed及Loading chunk 0 failed，前端盲目捕获error然后reload是极不可取的，目前没有上cdn，不知道上cdn之后还会不会出现类似问题。

莫名奇妙域名被注入script（非本项目）脚本，导致出错，没有就是好的

你这个应该是数据被劫持了https://blog.novenn.com/webpack%E4%B9%8BLoading-chunk-x-failed/

[ihuguowei]

该问题有解么，我提供一下我遇到情况的 case： 文档 HTML 的请求是有缓存的

Age: 0
Cache-Control: max-age=60
Connection: keep-alive
Content-Encoding: gzip
Content-Length: 1164
Content-Type: text/html
Date: Thu, 04 Jun 2020 17:47:28 GMT

[ihuguowei]

该问题有解么，我提供一下我遇到情况的 case： 文档 HTML 的请求是有缓存的

Age: 0
Cache-Control: max-age=60
Connection: keep-alive
Content-Encoding: gzip
Content-Length: 1164
Content-Type: text/html
Date: Thu, 04 Jun 2020 17:47:28 GMT

更换为非懒加载模式，再无此问题...

[erasine777]

請持續使用懶加載，並且命名webpackChunkName，防止webpack因為無命名預設使用0.js, 1.js, 2.js....時，造成無法正確讀取js檔案的錯誤