记一次vue项目本地开发没问题,打包后有页面无法显示,控制台报错 Loading CSS chunk chunk-xxx的原因分析

65 阅读1分钟

1 库版本

  • vue@2.6.10
  • vue-router@3.4.9
  • vuex@3.6.0
  • element@2.8.2

2 现象

常规vue项目,页面有一个菜单,点击后会路由到指定页面显示,本地开发没有报错,但是打包上线后,点击菜单页面无响应,查看控制台,有报错:

screenshot-20241216-104506.png 点击index.99607bf1.js:1:1超链,跳转到sources选项卡:

screenshot-20241216-110942.png

3 原因分析

初看报错,就是加载css文件失败,查看了下sources文件夹下的css目录,确实没有(/static/css/chunk-154afe2f.d6ec0052.css这个文件

screenshot-20241216-110101.png 以为是少文件了(其实感觉也挺奇怪,打包时也没有报错,部署也不可能手动一个一个文件复制),所以又看了下dist目录dist/static/css,确实有,服务器目录也存在

screenshot-20241216-124624.png 所以判断应该是因为css文件导致js报错,进而导致页面被阻塞 打开chunk-154afe2f.d6ec0052.css文件查看,第一行就看到了问题,

screenshot-20241216-094755.png 可以看到,这个css的url中ip地址格式错误的(这里格式错误比较明显,应该是前期手误写错了,如果是ip错误或者css名错误,作出判断也许会更麻烦) 找到对应组件,看到ip格式确实是错误的

screenshot-20241216-125820.png 修改后再次打包,线上恢复正常(本地开发为什么没问题,暂时还没有找到原因)