运行Vue项目报错ChunkLoadError: Loading chunk 0 failed.

今天在搭建一个前后端分离的项目,前端报了一个问题,由于我不太了解前端,找了好多办法都没解决。因为是维护老项目,拿到源码大概率是没有问题的(我也是赌的......只能按照没问题来查了),最后耐下心来,仔细检查对比路径,终于发现了问题。

此处假设我的项目名是:myProject

问题

ChunkLoadError: Loading chunk 0 failed.

(error: http://localhost:8082/myProject/static/js/0.js)

假设myProject是我的项目名,大概就报这个错

解题思路

我把error后面的地址http://localhost:8082/myProject/static/js/0.js复制到新的浏览器窗口,在控制台看报错信息。报错信息如下:

我的路径有重复的static/js,由此大概猜到是路径的问题。于是我将这段路径复制到浏览器,并结合我配置的publicPath(在vue.config.js里)。如下图所示:

如果我配置了publicPath: "./", 那就意味着访问js的路径在http://localhost:8082/static/js/app.js。我又拿http://localhost:8082/static/js/app.js到浏览器去访问试了一下,果然成功了。

所以我按照注释的提示,去改了publicPath(在vue.config.js里)这个配置,按照我的项目名改成了publicPath: "/myProject/",再重新运行vue,就解决了。

总结

公共路径配置的有问题,直接配置到了根下面,如http://localhost:8082/。

请结合浏览器控制台反馈的问题,检查vue.config.js里面的publicPath配置,或许这样你的问题就解决了。
另外,修改了配置一定要重启vue啊!!!!

这个问题卡了我很久,我也是前端小白。但咋说呢,程序没有那么多邪乎的事儿吧,还是要细心耐心的慢慢查。

相关推荐
胖虎2659 分钟前
基于 Vue3+TypeScript+Vant 的评论组件开发实践
vue.js
一头小鹿12 分钟前
【React Native+Appwrite】获取数据时的分页机制
前端·react native
冴羽20 分钟前
这是一个很酷的金属球,点击它会产生涟漪……
前端·javascript·three.js
烛阴28 分钟前
为什么 `Promise.then` 总比 `setTimeout(..., 0)` 快?微任务的秘密
前端·javascript·typescript
XiaoSong32 分钟前
基于 React Native/Expo 项目的持续集成(CI)最佳实践配置指南
前端·react native·react.js
white-persist38 分钟前
汇编代码详细解释:汇编语言如何转化为对应的C语言,怎么转化为对应的C代码?
java·c语言·前端·网络·汇编·安全·网络安全
张愚歌1 小时前
轻松打造个性化Leaflet地图标记
前端·javascript
华仔啊1 小时前
CSS实现高级流光按钮动画,这几行代码堪称神来之笔
前端·css
用户3777967210961 小时前
新值依赖旧值?并发更新的“坑”
javascript
歪歪1001 小时前
详细介绍一下“集中同步+分布式入库”方案的具体实现步骤
开发语言·前端·分布式·后端·信息可视化