vue webpack打包后图片路径错误的完美解决方法
更新时间：2018年12月07日 08:26:14 作者：honey缘木鱼
这篇文章主要介绍了vue webpack打包后图片路径错误的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
项目用run dev build 打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。
因为我们的图片路径都是经历过文件夹的，在本地引用图片是绝对路径，但打包后因为把配置的static文件夹当成了根路径，所以很多图片找不到都不显示。
解决办法如图：
(1).
修改 assetsPublicPath: './'
(2).打开webpack.prod.conf.js，在output：增加 publicPath: './'
虽然解决了资源路径的引用问题，但是资源里面的背景图片还是不显示， background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2fbf2.png) no-repeat所以我们要保留css引用图片的正常路径，即：url(../../static/img/logo-index.2fbf2.png) no-repeat
那么就需要修改build文件夹下的utils.js代码，如图所示：
添加publicPath:'../../'这一行代码，这样不论是字体还是图片的引用问题都能解决。
总结
以上所述是小编给大家介绍的vue webpack打包后图片路径错误的完美解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了解决vue前后端端口不一致的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-07-07
这篇文章主要介绍了Vue下路由History模式打包后页面空白，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了elementPuls 表格反选实现示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
Vue项目保持element组件同行,设置组件不自动换行问题
这篇文章主要介绍了Vue项目保持element组件同行,设置组件不自动换行问题。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
Element plus中el-input框回车触发页面刷新问题以及解决办法
在el-form表单组件中el-input组件输入内容后按下Enter键刷新了整个页面,下面这篇文章主要给大家介绍了关于Element plus中el-input框回车触发页面刷新问题以及解决办法,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了Vue-Router基础学习笔记(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
对于vue来说，组件之间的消息传递是非常重要的，用vue可以是要组件复用的，而组件实例的作用域是相互独立，这意味着不同组件之间的数据无法互相引用，一般来说，组件之间可以有几种关系，下面是我对组件之间消息传递的常用方式的总结2022-08-08
这篇文章主要帮助大家简单的理解vue中Props属性，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
本篇文章主要介绍了vue-axios使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了在vue里使用codemirror遇到问题，本文给大家记录下来了,需要的朋友可以参考下2018-11-11
最新评论