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

最新推荐文章于 2025-04-28 16:22:57 发布
最新推荐文章于 2025-04-28 16:22:57 发布
阅读量6.8k 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jeesr/article/details/117551724
博主在使用vue-admin-beautiful框架时遭遇打包问题，EPERM错误反复出现。解决过程包括清理dist目录、修改静态资源名，最终发现静态资源目录名的改变解决了大部分问题。寻求高手指导，共同探讨原因。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

Uncaught SyntaxError: Unexpected token ';'
ChunkLoadError: Loading chunk chunk-******* failed.

在这里插入图片描述
重新打包了N次，有时候会报EPERM: operation not permitted, lstat …，有时候不报打包成功，但是都有些页面打不开，重启ide，重启电脑，都没用。

准备重新cnpm i，把node_modules目录重命名了，执行cnpm i，结果一大推错安装不成功，npm i，也是一样的安装不成功。

不过幸好是把node_modules目录重命名了，没有删除和覆盖，重新用回原来的node_modules，更换了vue设置，把打包目录名dist换了一下，dist2，打包，问题依旧，很多页面还是报错。

再次在设置里看，把静态资源目录static目录名改成static2，打包上传，居然不报错了。

但是还是一脸蒙逼，搞不懂原因。欢迎高手交流指点！我的微信：

【异常】使用Webpack打包的项目，因浏览器存在缓存问题，导致控制台报错ChunkLoadError: Loading chunk failed
本本本添哥
04-12 2885
为它们添加一个包含文件内容的哈希值，这样每次构建都会生成不同的文件名，从而避免浏览器缓存问题。给每次打包的文件名后面添加一个哈希值，以供浏览器区分。这样每次打包出来的js文件都不一样，也就解决了浏览器的缓存问题。控制台报错提示中所请求的js文件哈希值跟sources缓存的文件哈希值并不一样，说明 当前页面请求了缓存，然而由于资源文件被更新 导致找不到 出现404的情况。在浏览器中打开开发者工具（通常是按F12键），然后选择"Network"选项卡，点击"Clear cache"按钮来清除浏览器缓存。
ChunkLoadError: Loading chunk {n} failed.
我叫陈小皮。
05-31 4987
偶现路由切换，控制台报错 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报错：Loading chunk * failed，vue-router懒加载出错问题。
最新发布
MMF博客园
04-28 416
vue报错：Loading chunk * failed，vue-router懒加载出错问题。
前端vue项目打包出现警告且在测试环境打不开页面及控制台报错ChunkLoadError问题解决方案
热门推荐
weixin_55894946的博客
08-29 3万+
直接上警告及报错的效果图，图一是在打包过程中出现的警告提示（注意：这个警告可能会在打包过程中一闪而过，被下面的内容覆盖导致忽略此警告），图二是环境上，点击导航栏后，页面打不开，并且控制台报错信息，而且打包文件明显过大，压缩后的包文件也同样明显过大...
Vue:打包app运行后出现Loading chunk chunk** failed.报错
奋斗鱼
02-27 5000
问题： 用Hbuilder打包app项目，运行后控制台出现Loading chunk chunk** failed.报错，图片加载不出来，点击导航页面无法跳转。控制台出现Loading chunk chunk** failed.的报错提示。 解决方案 将路由的mode属性改为hash。 重新编译运行后，问题解决。 ...
deleteOriginalAssets 导致的 ChunkLoadError: Loading chunk * failed 报错问题
一个努力学习的程序猿
11-09 6407
话不多说，直接上报错： 这个报错看起来可太眼熟了。在网上一搜，大致的解决方案是： 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 {n} failed问题的解决方法
10-18
在Vue项目中，开发者经常会遇到"Loading chunk {n} failed"的问题，该问题通常与Webpack的懒加载机制有关。Webpack在构建过程中会对项目代码进行拆分，形成多个chunk，以支持懒加载和代码分割。而当浏览器尝试动态...
chunk-vendors.e90a8dff.js:35 Uncaught (in promise) ChunkLoadError: Loading chunk chunk-0dd30ebd failed. (missing: http://192.12.167.131:10262/datasharing/js/chunk-0dd30ebd.0db2d158.js) 为什么打包部署后报错 页面无法跳转
03-26
嗯，用户遇到了Vue或类Vue项目中因chunk加载失败导致页面无法跳转的问题，具体报错是ChunkLoadError: Loading chunk failed。我需要先理解这个错误的原因，然后找出解决办法。根据引用[1]，这个问题通常和浏览器缓存...
Vue开发中出现 Loading Chunk-###... Failed 的问题解决
weixin_67140738的博客
10-12 6640
当访问了项目的某个界面（其他界面未访问，也就是未加载资源）时，加载了打包后的index.html入口文件，入口文件中会有其他异步加载的对应包，而在重新打包后这些包的名称发生了改变，这时候重新发布了项目。里面有跳转对应界面所需要的文件，但是这个文件是之前版本的文件，也就是说当你跳转一个未加载资源的界面，这时候用错误的路径去加载，然后报错。例如，如果的静态资源存放在CDN上，我们需要将publicPath配置为CDN的地址。例如，如果我们的打包文件需要输出到指定的目录下，我们需要将output配置目录的路径。
Vue项目升级后路由跳转无反应，报错Loading chunk chunk-xxxxx failed
Aimee的博客
08-12 4309
现象描述：系统升级后，偶尔出现切换菜单无响应情况，手动刷新界面后恢复正常，报错信息如图所示 原因分析：项目中使用了路由懒加载，每次发版且未手动刷新界面，点击菜单时，对应的文件在服务器端已被删除，此时就出现了点击菜单无反应的情况 解决方法：1.不采用懒加载路由 2.监听路由错误，正则匹配对应的错误消息后，自动刷新界面，代码如下 router.onError((error) => { const pattern = /Loading chunk chunk-(.*)+ failed/g;
vue 切换路由时发生Loading chunk xx failed.错误
qq_38870665的博客
02-01 1893
由于在使用前进行了打包，在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 4426
最近一直在捣鼓的Springboot+Vue 前后端分离项目，Vue 前端项目打包部署到Nginx 服务器访问时，点击导航栏切换一直报错： 原因：路由懒加载的情况下，访问当前应用进行路由跳转时都是实时动态的从服务器上拉取相应模块的js文件，这时候我们改完代码打包上线，js文件名更换了，路由跳转的时候由于页面并未刷新，所以还是访问的原来的文件名，这是就会出现找不到模块的错误。 路由异步加载组件报错，这个错误来源 webpack 进行 code spilt 之后某些 bundle 文件 lazy loadin
vue路由使用history模式部署线上报错ChunkLoadError: Loading chunk xxxxxx failed.
bamboozjy的博客
01-04 1046
后面查找原因是vue.config.js中的publicPath: './'的问题,把它改成publicPath: '/'然后打包就好了。使用vue的history路由模式打包上线,发现控制台报错。部署使用的是nginx。
遇到 Loading chunk {n} failed问题不要慌
w候人兮猗
02-09 6637
前言 最近在写个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 1508
vue项目本地联调没有问题，但是打包到服务器上去后相关的页面就不能跳转，并且报错loading chunk 4 failed，上网搜了很多解决方法都不行，最后发现是因为引入(import)了不该引入的代码。删掉以后重新步上去就解决了 ...
ChunkLoadError: Loading chunk 0 failed
w5475495的博客
05-01 3738
umi+antd打包部署之后，使用IP、域名访问提示： vendors.68a7c9b0.async.js:1 Uncaught SyntaxError: Unexpected token '<' (at vendors.68a7c9b0.async.js:1:1) umi.c458e4f5.js:1 Uncaught (in promise) ChunkLoadError: Loading chunk 0 failed. (mi......
ChunkLoadError: Loading chunk src_views_Main3_vue failed.
03-25
<think>嗯，用户遇到了ChunkLoadError，具体是加载chunk src_views_Main3_vue失败的问题。这个问题通常发生在Web应用中使用代码分割（code splitting）时，浏览器无法正确加载某个代码块。我需要一步步分析可能的原因和解决方案。 首先，我应该回忆一下ChunkLoadError的常见原因。可能包括：网络请求失败、资源路径配置错误、缓存问题、版本不一致或者构建产物缺失等。用户提到的错误信息中提到了加载chunk失败，所以首先考虑资源路径是否正确。比如，应用部署后，如果资源路径配置不正确，浏览器可能无法找到对应的chunk文件。这时候需要检查构建工具的公共路径（publicPath）设置，确保其指向正确的CDN或服务器路径。 接下来，缓存也是一个常见的问题。浏览器或CDN可能缓存了旧版本的文件，导致新部署的chunk无法加载。这时候可以尝试清除缓存，或者在构建时给文件名添加哈希值，强制浏览器获取最新版本。例如，Webpack的output配置中使用[chunkhash]或[contenthash]来生成唯一的文件名。 另外，代码分割的配置可能有误。比如，动态导入的语法是否正确，或者路由配置中是否错误地引用了不存在的模块。需要检查相关代码，确保动态导入的路径正确，并且模块确实存在。如果是Vue或React项目，可能是在路由懒加载时路径写错了，或者在构建过程中模块未被正确分割。 版本不一致也可能导致这个问题。比如，前端应用更新后，用户本地仍存在旧版本的代码，导致加载新chunk时出错。这时候可以考虑使用版本号或时间戳来管理静态资源，确保用户获取的是最新版本。此外，服务端是否正确地返回了最新的资源，而不是旧的缓存文件，也需要检查。 构建过程中是否有错误或警告，导致某些chunk未被正确生成，这也是一个可能性。需要检查构建日志，确认是否有相关错误，比如模块未找到、语法错误等。如果构建失败或部分失败，生成的chunk文件可能缺失或不完整，从而导致加载失败。 还有可能是浏览器的兼容性问题，或者用户的网络环境导致加载失败。这时候需要测试不同浏览器和设备，确认问题是否普遍存在。如果只是个别用户遇到，可能是他们的网络问题，可以提示用户检查网络连接或尝试刷新页面。 最后，如果用户使用的是框架如Vue或React，可能需要检查相关插件或路由配置是否正确处理了代码分割。例如，Vue Router的懒加载语法是否正确，或者Webpack的SplitChunks配置是否合理。 综上所述，解决步骤可能包括检查资源路径配置、清除缓存、验证动态导入语法、检查构建日志、确保版本一致性等。需要逐一排查这些可能性，找到具体原因并应用相应的解决方案。</think>### ChunkLoadError加载失败的解决方案 ChunkLoadError通常出现在前端应用使用代码分割（code splitting）时，浏览器未能成功加载某个代码块。以下是逐步排查和解决的方案： --- #### 1. **检查资源路径配置** - **问题原因**：构建工具的公共路径（`publicPath`）配置错误，导致浏览器请求的chunk路径与实际部署路径不一致。 - **解决方案**： - 若使用Webpack，检查`output.publicPath`配置，例如： ```javascript // webpack.config.js module.exports = { output: { publicPath: '/', // 根据部署环境调整为正确的路径（如CDN地址） }, }; ``` - 若使用Vue CLI或React，检查`vue.config.js`或项目配置文件的`publicPath`选项[^1]。 --- #### 2. **清除缓存与哈希命名** - **问题原因**：浏览器或CDN缓存了旧版本的chunk文件。 - **解决方案**： - 为chunk文件名添加哈希值（Webpack默认支持`[chunkhash]`或`[contenthash]`）： ```javascript output: { filename: '[name].[contenthash].js', chunkFilename: '[name].[contenthash].js', } ``` - 部署后强制刷新缓存（如添加版本号参数`?v=1.0.0`）。 --- #### 3. **验证动态导入语法** - **问题原因**：动态导入（`import()`）的模块路径错误或模块不存在。 - **解决方案**： - 检查代码中动态导入的路径是否正确。例如Vue Router的懒加载： ```javascript // 错误示例：路径拼写错误 const Main3 = () => import('@/views/Main3.vue'); // 正确路径应为'@/views/Main3.vue' ``` - 确认目标文件`src/views/Main3.vue`存在且未被误删。 --- #### 4. **检查构建产物完整性** - **问题原因**：构建过程中断或配置错误，导致chunk文件未生成。 - **解决方案**： - 运行构建命令（如`npm run build`），观察是否有报错或警告。 - 检查输出目录（如`dist/`）是否包含`src_views_Main3_vue.[hash].js`文件。 --- #### 5. **网络请求分析** - **问题原因**：网络问题或服务器未正确返回chunk文件。 - **解决方案**： - 打开浏览器开发者工具（F12），查看Network面板中该chunk的请求状态： - 若返回404，说明路径错误或文件缺失。 - 若返回500，检查服务器日志定位问题。 --- #### 6. **版本一致性验证** - **问题原因**：前端代码与服务器部署版本不一致。 - **解决方案**： - 确保前后端同时更新，避免部分文件未同步。 - 使用持续集成（CI/CD）工具自动化部署流程。 --- ###
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值