1 库版本
- vue@2.6.10
- vue-router@3.4.9
- vuex@3.6.0
- element@2.8.2
2 现象
常规vue项目,页面有一个菜单,点击后会路由到指定页面显示,本地开发没有报错,但是打包上线后,点击菜单页面无响应,查看控制台,有报错:
点击index.99607bf1.js:1:1超链,跳转到sources选项卡:
3 原因分析
初看报错,就是加载css文件失败,查看了下sources文件夹下的css目录,确实没有(/static/css/chunk-154afe2f.d6ec0052.css这个文件
以为是少文件了(其实感觉也挺奇怪,打包时也没有报错,部署也不可能手动一个一个文件复制),所以又看了下dist目录dist/static/css,确实有,服务器目录也存在
所以判断应该是因为css文件导致js报错,进而导致页面被阻塞
打开chunk-154afe2f.d6ec0052.css文件查看,第一行就看到了问题,
可以看到,这个css的url中ip地址格式错误的(
这里格式错误比较明显,应该是前期手误写错了,如果是ip错误或者css名错误,作出判断也许会更麻烦
)
找到对应组件,看到ip格式确实是错误的
修改后再次打包,线上恢复正常(本地开发为什么没问题,暂时还没有找到原因)