解决Vue打包后访问图片/图标不显示的问题

您是否遇到过在打包npm运行构建后，项目在线运行时资源文件(图片和图标)不显示的问题？

接下来，我会和大家分享我的解决方案~

1.检查打包dist中的css文件

打开这个文件后，你会觉得头晕，因为都是打包压缩的css代码，不过没关系，关键词搜索url

检查url路径是否正确匹配

对比后惊人的发现！

所以补充一下就可以了././之前的url路径，但是很麻烦。每次包装后是否需要进行二次加工？

不是的！

2.自动添加的方法././

打开build/utils.js，检查publicPath值是否正确，并进行相应的配置！

if(options . extract){ return extract plugin . extract({ use : loaders，fallback: 'vue-style-loader '，公共路径： '././' })} else { return[' vue-style-loader ']。concat (loaders)}已配置，npm run build将在打包后自动匹配正确的路径，无需手动修改。

摘要

以上是边肖介绍的解决Vue打包后访问图片/图标不显示的解决方案。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！