请提供更详细信息

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

这是报错的源码区域

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

也是一样的问题

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

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

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

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

？

所以说现在没答案？

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

@TobyHong 请问是如何解决的？

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

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

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

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

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

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

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

没有呢

+1

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

@lzzhanglin 本来就没有点啊

@lzzhanglin 本来就没有点啊

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

复现步骤：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

偶发性原因：

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 或者混淆

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

mark一下

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

偶发性原因：

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 或者混淆

可是你这样缓存就失效了

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

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

• 以下是引用

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

求解决方法

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

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

请问如何排查到的呢

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

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

同样的问题，尝试过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/

该问题有解么，我提供一下我遇到情况的 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

该问题有解么，我提供一下我遇到情况的 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

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

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

今天我也遇到这个问题（安卓4.4），报错unhandled promise rejection loading chunk 2 failed.....type:'missing''
然后也按很多Google能搜索到的方法尝试，包括使用webpack-retry-chunk-load-plugin插件，没有解决。
后续在IE控制台单独执行这个chunk，发现语法错误（某个npm包居然没编译好）....修复后解决。。。希望对看到这个问题的人有一点点帮助吧！

本地启动,报错app.js:978 ChunkLoadError: Loading chunk 4 failed.
然后按网上的方法
publicPath :'/' 这个就可以了

然后可以了.刚测试了部署服务器也没问题了.

chunk-libs.2ee53a3f.js:46 ChunkLoadError: Loading chunk chunk-05d1adf5 failed.
(timeout: http://127.0.0.1:63173/static/js/chunk-05d1adf5.90bb992e.js)
at Function.f.e (http://127.0.0.1:63173/:1:3461)
at component (http://127.0.0.1:63173/static/js/app.831fb7bd.js:1:43229)
at http://127.0.0.1:63173/static/js/chunk-libs.2ee53a3f.js:46:15570
at http://127.0.0.1:63173/static/js/chunk-libs.2ee53a3f.js:46:15820
at Array.map ()
at http://127.0.0.1:63173/static/js/chunk-libs.2ee53a3f.js:46:15796
at Array.map ()
at Lt (http://127.0.0.1:63173/static/js/chunk-libs.2ee53a3f.js:46:15746)
at http://127.0.0.1:63173/static/js/chunk-libs.2ee53a3f.js:46:15257
at d (http://127.0.0.1:63173/static/js/chunk-libs.2ee53a3f.js:46:18568)

我的错误是这样，加载超时，确认网络没有问题