解决Vue打包后访问图片/图标不显示的问题
更新时间：2019年07月25日 08:39:13 作者：东北大呲花
这篇文章主要介绍了 解决Vue打包后访问图片/图标不显示的问题，本文给大家介绍的非常详细，具有一定的参考解决价值,需要的朋友可以参考下
大家可否遇到过 npm run build 打包后，项目在线上运行时，资源文件 (图片、图标)不显示 的问题，
接下来，我给大家分享一下我的解决方案~
1.检查打包后dist中的css文件
打开此文件后你会头晕，因为都是打包压缩过的css代码，不过没关系 ，关键字搜索url
检查该url路径是否匹配正确
对比后惊人发现！！！
因此在url路径前添加../../就OK了， 但是 很麻烦，每次打包后都要进行二次加工吗？
并不是！！！
2.自动添加 ../../ 的方法
打开build/utils.js，检测 publicPath 值是否正确，自己配置成相应的即可！
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
配置好之后，npm run build打包后就会自动匹配正确的路径，无需手动修改，
总结
以上所述是小编给大家介绍的解决Vue打包后访问图片/图标不显示的问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
今天小编就为大家分享一篇关于vue中子组件传递数据给父组件的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了vue项目百度地图如何自定义标注marker问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
桑基图是一种用于直观显示流向数据的可视化工具,特别适合展示复杂的网络关系和资源流动,在前端项目中,通过结合 Vue 3 和 ECharts,可以快速实现交互性强、样式美观的桑基图,本文将通过完整的代码示例,带你一步步完成一个桑基图的实现,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了vue+express+jwt持久化登录的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了vue如何自定义InputNumber计数器组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
在做开发中都会遇到的需求,每个用户的权限是不一样的,那他可以访问的页面(路由)可以操作的菜单选项是不一样的,如果由后端控制,我们前端需要去实现动态路由,动态渲染侧边菜单栏,这篇文章主要给大家介绍了关于vue3实现动态侧边菜单栏的几种方式,需要的朋友可以参考下2024-02-02
浅谈vue中document.getElementById()拿到的是原值的问题
这篇文章主要介绍了浅谈vue中document.getElementById()拿到的是原值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了vue使用echarts实现地图的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,下面这篇文章主要给大家介绍了关于vue自定义封装指令以及实际使用的相关资料,需要的朋友可以参考下2022-01-01
Moment.js 是一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期。这篇文章主要给大家介绍了关于vue利用Moment插件格式化时间的相关资料,需要的朋友可以参考下2021-05-05
最新评论