Unhandled Rejection (Error): Loading chunk 9 failed. HTMLScriptElement.onScriptComplete

最新推荐文章于 2025-04-28 16:22:57 发布
原创 最新推荐文章于 2025-04-28 16:22:57 发布 · 1.5w 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何通过配置 .webpackrc 或 .roadhogrc 文件中的 publicPath 属性来设置 roadhog 构建项目的公共路径。

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

错误信息
解决方案
roadhog 下 .webpackrc 或者 .webpackrc.js、.roadhogrc 或者 .roadhogrc.js 配置

{
 "publicPath": "/"
}
【异常】使用Webpack打包的项目，因浏览器存在缓存问题，导致控制台报错ChunkLoadError: Loading chunk failed
本本本添哥
04-12 3062
为它们添加一个包含文件内容的哈希值，这样每次构建都会生成不同的文件名，从而避免浏览器缓存问题。给每次打包的文件名后面添加一个哈希值，以供浏览器区分。这样每次打包出来的js文件都不一样，也就解决了浏览器的缓存问题。控制台报错提示中所请求的js文件哈希值跟sources缓存的文件哈希值并不一样，说明 当前页面请求了缓存，然而由于资源文件被更新 导致找不到 出现404的情况。在浏览器中打开开发者工具（通常是按F12键），然后选择"Network"选项卡，点击"Clear cache"按钮来清除浏览器缓存。
Redux - Unhandled Rejection (Error): You may not call store.getState() while the reducer is executin
高级前端工程师
03-15 3626
react.js，redux，报错，Redux Devtools，如何解决react报错问题，浏览器控制台报错怎么办，react报错Unhandled Rejection (Error): You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer in
Unhandled Rejection (ChunkLoadError): Loading chunk mf-dep_vendors-node_modules_core-js_index_j
qubes的专栏
10-11 4230
antd-pro框架(基于umi) 重启服务后，常常汇报这个错。删除临时目录 src/.umi 可以解决问题。
Vue开发中出现 Loading Chunk-###... Failed 的问题解决
weixin_67140738的博客
10-12 6726
当访问了项目的某个界面（其他界面未访问，也就是未加载资源）时，加载了打包后的index.html入口文件，入口文件中会有其他异步加载的对应包，而在重新打包后这些包的名称发生了改变，这时候重新发布了项目。里面有跳转对应界面所需要的文件，但是这个文件是之前版本的文件，也就是说当你跳转一个未加载资源的界面，这时候用错误的路径去加载，然后报错。例如，如果的静态资源存放在CDN上，我们需要将publicPath配置为CDN的地址。例如，如果我们的打包文件需要输出到指定的目录下，我们需要将output配置目录的路径。
vue 路由懒加载 报错 Loading chunk * failed 组件加载不出来
qq_47956199的博客
02-07 1244
跳转对应的路由，无法跳转，打开控制太发现报错，查看网络发现对应的组件没有获取到，而且获取时间只有4ms就停止获取了，谷歌不会报这样的错误，但是edge会，解决方法(不一定有用)：给请求代码套个try。
Loading chunk {n} failed
weixin_42549581的博客
02-17 3247
尝试过有效的方法： https://stackoverflow.com/questions/48940522/error-loading-chunk-0-failed { path: 'product_new', component: () => import('@/views/platform/product/product_new'), ...
vue报错：Loading chunk * failed，vue-router懒加载出错问题。
MMF博客园
04-28 466
vue报错：Loading chunk * failed，vue-router懒加载出错问题。
使用hbase shell命令进不去 报错:Unhandled Java exception: java.lang.IncompatibleClassChangeError: Found class
m0_48136394的博客
05-06 1280
错误的场景 启动hbase的进程后使用shell命令进行操作 输入hbase shell报以下错误信息: HBase Shell Use "help" to get list of supported commands. Use "exit" to quit this interactive shell. For Reference, please visit: http://hbase.apache.org/2.0/book.html#shell Version 2.2.6, r88c9a386176e
npm WARN registry Unexpected warning for https://registry.npm.taobao.org/: Miscellaneous Warning EPERM: EPERM: operation not permitted, open 'C:\\Program Files\\nodejs\\node_cache\\_cacache\\tmp\\6656633e' npm WARN registry Using stale package data from https://registry.npm.taobao.org/ due to a request error during revalidation. Unhandled rejection Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_cacache\tmp\a549871a' Unhandled rejection Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_cacache\tmp\d7072cb1' Unhandled rejection Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_cacache\tmp\529c6070'
06-09
这个问题可能是因为你的 npm 安装包缓存目录没有权限导致的。 你可以尝试按照以下步骤解决该问题： 1. 打开命令提示符或 PowerShell 以管理员身份运行。 2. 在命令提示符或 PowerShell 中运行以下命令： ...
javax.xml.ws.soap.SOAPFaultException: Internal Error， org.apache.cxf.binding.soap.SoapF， webService
global_coding的博客
06-07 480
javax.xml.ws.soap.SOAPFaultException: Internal Error， org.apache.cxf.binding.soap.SoapF， webService
Uncaught (in promise) ScriptExternalLoadError: Loading script failed
永生天地
04-06 1505
new ModuleFederationPlugin({ name: ‘host’, remotes: { // test01: ‘test01@http://localhost:8081/test01.js’, htim: ‘htim@…/im/entry.js’, example: ‘example@…/example/entry.js’ }, shared: { …dependencies } }), new ModuleFederationPlugin({ name: ‘htim’, filenam
Unhandled Rejection (ChunkLoadError): Loading chunk mf-dep_vendors-node_modules_umi_node_modules_cor
weixin_46600931的博客
04-11 2638
config.tsx/umirc.ts配置chainWebpack时因加上此判断 if (process.env.UMI_ENV!umi Webpack打包配置在开发环境生效问题。打包生效应在非dev环境才能生效，
[vue-router] Failed to resolve async component default: Error: Loading chunk 0 failed.
weixin_33845881的博客
12-20 7883
在整合laravel5.4 和vue2.1的时候遇到一个奇怪的问题 Uncaught SyntaxError: Unexpected token <Error: Loading chunk 0 failed. at HTMLScriptElement.onScriptComplete (app.js:99)[vue-router] Failed to resolve async ...
Loading chunk * failed错误
one、two、three，go的博客
03-18 2697
【代码】Loading chunk * failed错误。
vue-router.min.js:6 Error: Loading chunk 2 failed. at HTMLScriptElement.a (b
TanMengyi的博客
06-04 2080
点击某个按钮，没有跳转到对应的页面，出现了报错： vue-router.min.js:6 Error: Loading chunk 2 failed. at HTMLScriptElement.a (b 于是，百度了很久… 看到一个回答： 这个通常是由于webpack打包重命名了改动过的css和js文件，并且删除了原有的文件，然后有两种场景： 1.用户正在浏览页面时你发包了，并且你启用了懒加载，这个时候用户的html文件中的js和css名称就和你服务器上的不一致，导致这个错误 2.用户浏览器有html的缓存
vue项目加载优化之懒加载，以及Loading chunk {n} failed解决方法
kuke_kuke的博客
01-07 1万+
一、懒加载 懒加载：随时用随时加载，避免单页面应用一次性加载所造成的时间过长。 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: '/login' ...
vue项目加了vue-router懒加载，打包后在服务器上访问，报错Loading chunk 40 failed. 解决办法
weixin_41838734的博客
05-21 1万+
加了vue-router路由懒加载之后，项目一直报错，Loading chunk 40 failed类似这样百度了各种，还是没找到能跑起来的方法，最后试了一把将config / index.js的build的路径assetsPublicPath改为‘/’,项目居然成功跑起来了   ...
关于Vue路由跳转问题：vue-router.esm.js:1832 Error: Loading chunk 15 failed. at HTMLScriptElement.onScript
政旻
07-12 2万+
1.在写Vue的路由时，可能跳转页面会出现以下问题： 如果此时百度下面的error报错信息，没有完全符合的解决方案，提示的是异步加载组件出现的问题。 那么因此就会忽略了上面报的404错误，当然就本人所抛出的Knowledge-base-a.js,是在webpack.common.js中配置，经过编译后生成的文件。 所以编译时虽然不会报错，但是可以注意看编译的结果： 由此可以看出，是因为...
UnhandledPromiseRejectionWarning 错误解决
热门推荐
风格色的博客
02-27 18万+
报错内容(node:2565) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: EACCES: permission denied, unlink '/home/fenggese/workspace/express/code-snippet-web/.nuxt/App.vu
网页已经可以打开，但在交互的时候报错。chunkloaderror：loading chunk 6113 failed
最新发布
07-30
<think>我们正在解决一个Webpack分包加载错误：ChunkLoadError: Loading chunk 6113 failed。这个错误通常发生在Webpack打包的应用程序中，当动态导入的代码块（chunk）无法加载时出现。根据引用[1][2][3]中的信息，这可能是由于以下原因之一： 1. 网络问题导致分块文件加载失败 2. 服务器配置不正确（如MIME类型错误） 3. 文件路径错误（例如，部署后基础路径改变） 4. 浏览器缓存了旧版本的分块映射文件（manifest） 5. 代码分割配置问题 解决步骤： ### 1. 检查网络请求 打开浏览器开发者工具（F12）的Network选项卡，刷新页面，观察加载失败的chunk文件请求（通常名为`6113.[hash].js`或类似）。查看： - 状态码是否为404/403（文件不存在或权限问题） - 请求URL是否正确（是否缺少基础路径） ### 2. 验证文件路径 - 如果项目部署在子路径下（如`http://example.com/my-app/`），需配置Webpack的`publicPath`： ```javascript // webpack.config.js output: { publicPath: &#39;/my-app/&#39;, // 必须与部署路径一致 } ``` - 对于Vue CLI项目，在`vue.config.js`中设置： ```javascript module.exports = { publicPath: process.env.NODE_ENV === &#39;production&#39; ? &#39;/my-app/&#39; : &#39;/&#39; } ``` - Umi项目在`config/config.js`中配置： ```javascript export default { base: &#39;/my-app/&#39;, // 基础路径 publicPath: &#39;/my-app/&#39;, // 静态资源路径 } ``` ### 3. 清除缓存 - **强刷新**：按`Ctrl+F5`（Windows）或`Cmd+Shift+R`（Mac）强制清除缓存加载 - **清除浏览器缓存**：在开发者工具的Network选项卡中勾选"Disable cache" - **服务端配置缓存策略**：确保`index.html`不被缓存（设置`Cache-Control: no-cache`），其他静态资源使用带哈希的文件名长期缓存 ### 4. 检查服务器配置 - **MIME类型**：确保`.js`文件的MIME类型为`application/javascript` - **Nginx示例配置**： ```nginx location / { try_files $uri $uri/ /index.html; types { application/javascript js; } } ``` - **Apache示例**（`.htaccess`）： ```apache <Files *.js> AddType application/javascript .js </Files> ``` ### 5. 验证Webpack运行时配置 在入口文件（如`main.js`）添加错误处理逻辑，捕获加载失败错误并重试： ```javascript import * as Sentry from &#39;@sentry/vue&#39; window.addEventListener(&#39;unhandledrejection&#39;, event => { if (event.reason?.name === &#39;ChunkLoadError&#39;) { const chunkName = event.reason?.message.match(/chunk-(\w+)/)?.[1] if (chunkName) { window.location.reload() // 强制刷新页面 Sentry.captureException(new Error(`Chunk failed to load: ${chunkName}`)) } } }) ``` ### 6. 修复损坏的manifest 当部署新版本时，如果旧版本客户端仍在使用缓存的manifest文件，会导致加载旧chunk路径。解决方案： - 在文件名中使用哈希（Webpack默认行为） - 添加版本查询参数（`output.chunkFilename: &#39;[name].[contenthash].js&#39;`） - 在HTML模板中添加版本标识： ```html <script> window.__APP_VERSION__ = &#39;v1.2.3&#39; </script> ``` ### 7. 分块策略优化 避免过细的分块导致频繁加载失败： ```javascript // webpack.config.js optimization: { splitChunks: { chunks: &#39;all&#39;, minSize: 20000, // 超过20KB才单独分包 maxAsyncRequests: 6, // 最大并行请求数 } } ``` > ⚠️ **特别提示**：如果使用CDN，请确保上传所有新分块文件并刷新CDN缓存[^1]。 --- ### §§相关问题§§ 1. Webpack的代码分割原理是什么？ 2. 如何配置Webpack实现按需加载？ 3. 前端项目部署后如何优雅地清除用户浏览器缓存？ 4. Webpack的`publicPath`设置有哪些注意事项？ 5. 如何监控前端应用中的资源加载失败？</think>### 解决网页交互时出现 `ChunkLoadError: Loading chunk 6113 failed` 的方法 此错误通常由 Webpack 动态加载代码块失败引起，本质是浏览器无法加载应用的部分模块。以下是系统化的解决方案： --- #### 1. **清除浏览器缓存（首要操作）** ```bash # 强制刷新页面（不同浏览器快捷键） Chrome/Firefox: Ctrl + Shift + R 或 Ctrl + F5 Safari: Cmd + Option + R ``` - **原理**：浏览器缓存了旧版本的分块映射文件（manifest），导致加载新版本时路径不匹配[^1] - **扩展操作**： - 在开发者工具中勾选 **Network → Disable cache** - 清除所有站点数据：`chrome://settings/clearBrowserData` → 勾选"缓存的图片和文件" --- #### 2. **验证静态资源路径** 在浏览器开发者工具（F12）的 **Network** 选项卡中： 1. 查找失败请求：`chunk-6113.[hash].js` 2. 检查： - 状态码（404 表示文件缺失，403 表示权限问题） - 实际请求 URL 是否匹配服务器路径 - 文件大小（0KB 表示文件未生成） **解决方案**： ```javascript // vue.config.js 或 webpack.config.js module.exports = { publicPath: process.env.NODE_ENV === &#39;production&#39; ? &#39;/your-subpath/&#39; // 必须与服务器部署路径一致 : &#39;/&#39; } ``` --- #### 3. **修复服务器配置** 常见问题： - **MIME 类型错误**：服务器未正确返回 JS 文件的 `Content-Type: application/javascript` - **路由重定向失效**：单页应用需配置所有路径回退到 `index.html` **Nginx 示例配置**： ```nginx server { location / { try_files $uri $uri/ /index.html; # 关键配置 add_header Cache-Control "no-cache, no-store"; } location ~ \.js$ { types { application/javascript js; } } } ``` --- #### 4. **优化 Webpack 构建配置** 在打包配置中添加内容哈希，避免缓存问题： ```javascript // webpack.config.js output: { filename: &#39;[name].[contenthash].js&#39;, chunkFilename: &#39;[name].[contenthash].js&#39;, } ``` --- #### 5. **添加错误恢复机制** 在入口文件（如 `main.js`）添加全局错误捕获： ```javascript window.addEventListener(&#39;unhandledrejection&#39;, event => { if (event.reason?.name === &#39;ChunkLoadError&#39;) { const chunkName = event.reason.message.match(/chunk-(\w+)/)?.[1]; if (chunkName === &#39;6113&#39;) { window.location.reload(); // 强制刷新页面 } } }); ``` --- #### 6. **验证部署完整性** 检查服务器文件是否完整： 1. 构建后确认 `dist/` 目录存在 `chunk-6113.*.js` 2. 对比本地和服务器文件哈希值： ```bash # 本地生成哈希 sha1sum dist/js/chunk-6113.*.js # 服务器验证 curl http://your-domain/path/to/chunk-6113.*.js | sha1sum ``` --- > **根本原因**：此错误通常由 **动态加载的代码块版本不匹配** 导致，常见于热更新或增量部署场景。当应用运行时加载新版本模块，但浏览器仍使用旧版本映射表时触发[^2][^3]。 --- ###
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值