VUE打包上线后报错ChunkLoadError: Loading chunk chunk-* failed.

最新推荐文章于 2025-09-23 13:04:05 发布
原创 最新推荐文章于 2025-09-23 13:04:05 发布 · 6.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

博主在使用vue-admin-beautiful框架时遭遇打包问题，EPERM错误反复出现。解决过程包括清理dist目录、修改静态资源名，最终发现静态资源目录名的改变解决了大部分问题。寻求高手指导，共同探讨原因。

使用vue2的一个框架vue-admin-beatiful，在编译时被我打断了，越是就出现了问题，再次打包报错：

EPERM: operation not permitted, lstat ......

删了打包目录dist再次打包没有报错，可是打包出来传到服务器上有问题，部分页面打不开console会报错：

Uncaught SyntaxError: Unexpected token ';'
ChunkLoadError: Loading chunk chunk-*****
最低0.47元/天 解锁文章
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
10-18
在Vue项目中，开发者经常会遇到"Loading chunk {n} failed"的问题，该问题通常与Webpack的懒加载机制有关。Webpack在构建过程中会对项目代码进行拆分，形成多个chunk，以支持懒加载和代码分割。而当浏览器尝试动态...
运行Vue项目报错ChunkLoadError: Loading chunk 0 failed.
qq_35976548的博客
10-25 1468
公共路径配置的有问题，直接配置到了根下面，如http://localhost:8082/。请结合浏览器控制台反馈的问题，检查vue.config.js里面的publicPath配置，或许这样你的问题就解决了。另外，修改了配置一定要重启vue啊！！！！这个问题卡了我很久，我也是前端小白。但咋说呢，程序没有那么多邪乎的事儿吧，还是要细心耐心的慢慢查。
生产环境ChunkLoadError: Loading chunk xx failed.报错
wiyon的博客
07-07 1万+
生产环境ChunkLoadError: Loading chunk xx failed.报错
【记录一次 Vue Element Admin 部署踩坑】ChunkLoadError 与 Unexpected end of input 问题排查
最新发布
weixin_43231669的博客
09-23 326
文件过大，传输/解压时更容易出现问题 → 浏览器实际解析到的是“半截 JS”。访问报错的 chunk 地址，HTTP 状态码是 200，可以正常打开。这说明文件内容虽然大小一致，但执行时被判定为“不完整的 JS”。这样 5.4MB 的大 chunk 会自动被拆成更小的文件。尝试刷新 CDN 缓存、清理浏览器缓存，问题仍然存在。打开文件源码，发现内容在某个变量中间突然结束（例如。文件大小和本地打包产物一致，看起来没问题。清理缓存后，我自己也复现了这个问题。在我自己的电脑上访问没问题；
【异常】使用Webpack打包的项目，因浏览器存在缓存问题，导致控制台报错ChunkLoadError: Loading chunk failed
本本本添哥
04-12 3461
为它们添加一个包含文件内容的哈希值，这样每次构建都会生成不同的文件名，从而避免浏览器缓存问题。给每次打包的文件名后面添加一个哈希值，以供浏览器区分。这样每次打包出来的js文件都不一样，也就解决了浏览器的缓存问题。控制台报错提示中所请求的js文件哈希值跟sources缓存的文件哈希值并不一样，说明 当前页面请求了缓存，然而由于资源文件被更新 导致找不到 出现404的情况。在浏览器中打开开发者工具（通常是按F12键），然后选择"Network"选项卡，点击"Clear cache"按钮来清除浏览器缓存。
ChunkLoadError: Loading chunk {n} failed.
我叫陈小皮。
05-31 5107
偶现路由切换，控制台报错 ChunkLoadError: Loading chunk {n} failed.可能是远程资源更新，浏览器缓存，出现静态资源不一致等原因造成的。
vue解决 ChunkLoadError: Loading chunk {n} failed.
nobody
08-12 1万+
vue前后端分离的项目，浏览器报以下错： ChunkLoadError: Loading chunk 2 failed. （即：Loading chunk {n} failed...） 将 export default new Router({ mode: 'history', // 去掉url中的# scrollBehavior: () => ({ y: 0 }), routes: constantRoutes }) 替换为： const $router = new Ro
前端vue项目打包出现警告且在测试环境打不开页面及控制台报错ChunkLoadError问题解决方案
热门推荐
weixin_55894946的博客
08-29 3万+
直接上警告及报错的效果图，图一是在打包过程中出现的警告提示（注意：这个警告可能会在打包过程中一闪而过，被下面的内容覆盖导致忽略此警告），图二是环境上，点击导航栏后，页面打不开，并且控制台报错信息，而且打包文件明显过大，压缩后的包文件也同样明显过大...
Vue:打包app运行后出现Loading chunk chunk** failed.报错
奋斗鱼
02-27 5056
问题： 用Hbuilder打包app项目，运行后控制台出现Loading chunk chunk** failed.报错，图片加载不出来，点击导航页面无法跳转。控制台出现Loading chunk chunk** failed.的报错提示。 解决方案 将路由的mode属性改为hash。 重新编译运行后，问题解决。 ...
deleteOriginalAssets 导致的 ChunkLoadError: Loading chunk * failed 报错问题
一个努力学习的程序猿
11-09 6618
话不多说，直接上报错： 这个报错看起来可太眼熟了。在网上一搜，大致的解决方案是： 1、记一次vue history模式下的报错ChunkLoadError: Loading chunk xx failed net::ERR_ABORTED 404 (Not Found)解决方案 2、Error: Loading chunk * failed，Vue Router懒加载报错问题解决方案 照着一做，history、publicPath、onError，甚至还有扯到上线服务器的，任你有什么解决方案，到我这里统统
Vue开发中出现 Loading Chunk-###... Failed 的问题解决
weixin_67140738的博客
10-12 7262
当访问了项目的某个界面（其他界面未访问，也就是未加载资源）时，加载了打包后的index.html入口文件，入口文件中会有其他异步加载的对应包，而在重新打包后这些包的名称发生了改变，这时候重新发布了项目。里面有跳转对应界面所需要的文件，但是这个文件是之前版本的文件，也就是说当你跳转一个未加载资源的界面，这时候用错误的路径去加载，然后报错。例如，如果的静态资源存放在CDN上，我们需要将publicPath配置为CDN的地址。例如，如果我们的打包文件需要输出到指定的目录下，我们需要将output配置目录的路径。
Vue项目升级后路由跳转无反应，报错Loading chunk chunk-xxxxx failed
Aimee的博客
08-12 4369
现象描述：系统升级后，偶尔出现切换菜单无响应情况，手动刷新界面后恢复正常，报错信息如图所示 原因分析：项目中使用了路由懒加载，每次发版且未手动刷新界面，点击菜单时，对应的文件在服务器端已被删除，此时就出现了点击菜单无反应的情况 解决方法：1.不采用懒加载路由 2.监听路由错误，正则匹配对应的错误消息后，自动刷新界面，代码如下 router.onError((error) => { const pattern = /Loading chunk chunk-(.*)+ failed/g;
vue 切换路由时发生Loading chunk xx failed.错误
qq_38870665的博客
02-01 1923
由于在使用前进行了打包，在vue.config.js里面配置了publicPath:'./', 这里在路由跳转的时候就出现了错误。当然每个项目可以有所不同，我们在这里进行了一个判断： publicPath:process.env.NODE_ENV==='production'?'./':'/', 这样问题就解决了，当然有一些系统则是和这个配置相反，具体情况具体分析。 ...
Vue打包后放到服务器出现Loading chunk {n} failed 错误的解决办法
Rey
03-31 1万+
这个报错的主要原因是因为vue通过webpack打包生成多个模块js文件，我们把build后的文件上传到服务器，这时是第一次上传，我们访问时不会出现该报错。但是正常的项目都会需要更新迭代，当我们再次打包后某些js文件就会改变，再上传到服务器后，由于浏览器缓存问题，用户在访问的时候还会再访问之前的js文件，这是就会出现Loading chunk {n} failed这种报错。 哪怕我们解决浏览器的缓...
解决Vue打包后放到部署到服务器运行时出现Loading chunk * failed 错误
go
05-09 4570
最近一直在捣鼓的Springboot+Vue 前后端分离项目，Vue 前端项目打包部署到Nginx 服务器访问时，点击导航栏切换一直报错： 原因：路由懒加载的情况下，访问当前应用进行路由跳转时都是实时动态的从服务器上拉取相应模块的js文件，这时候我们改完代码打包上线，js文件名更换了，路由跳转的时候由于页面并未刷新，所以还是访问的原来的文件名，这是就会出现找不到模块的错误。 路由异步加载组件报错，这个错误来源 webpack 进行 code spilt 之后某些 bundle 文件 lazy loadin
vue路由使用history模式部署线上报错ChunkLoadError: Loading chunk xxxxxx failed.
bamboozjy的博客
01-04 1125
后面查找原因是vue.config.js中的publicPath: './'的问题,把它改成publicPath: '/'然后打包就好了。使用vue的history路由模式打包上线,发现控制台报错。部署使用的是nginx。
遇到 Loading chunk {n} failed问题不要慌
w候人兮猗
02-09 6761
前言 最近在写个vue的demo,调试过程中出现个问题,vconsole中提示 [vue-router] Failed to resolve async component default: Error:Loading chunk 10 failed. 大致意思就是路由异步加载组件的时候报错了 报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。...
Vue踩坑记录之ChunkLoadError
云帆的博客
06-04 2万+
记录下这个巨坑（实质上是正则表达式错误，如果已知问题，想看如何解决直接跳到最后）
报错loading chunk 4 failed
叮当的猫猫的博客
04-12 1553
vue项目本地联调没有问题，但是打包到服务器上去后相关的页面就不能跳转，并且报错loading chunk 4 failed，上网搜了很多解决方法都不行，最后发现是因为引入(import)了不该引入的代码。删掉以后重新步上去就解决了 ...
vue报这个错 chunkloadError: Loading chunk 524 failed. 然后菜单点不动了
07-03
首先，用户的问题是关于Vue应用中出现的错误："ChunkLoadError: Loadingchunk524 failed"，导致菜单无法点击。我需要基于提供的引用信息来回答这个问题。回顾引用内容：-引用[1]：提到浏览器缓存问题导致...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值