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的列表交错过渡实现代码示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要给大家介绍了关于vue中插槽slot的理解和使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-04-04
这篇文章主要介绍了vue项目中请求数据特别多导致页面卡死的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
axios 实现post请求时把对象obj数据转为formdata
今天小编就为大家分享一篇axios 实现post请求时把对象obj数据转为formdata，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
vue-seamless-scroll无缝滚动组件使用方法详解
这篇文章主要为大家详细介绍了vue-seamless-scroll无缝滚动组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
本篇文章主要介绍了vue-router 导航钩子的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示
这篇文章主要介绍了Vue+ECharts实现中国地图的绘制以及拖动、缩放和各省份自动轮播高亮显示,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-12-12
这篇文章主要介绍了vue使用fengMap速度慢的原因分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
有的时候数据量比较大,比如几千甚至上万条的时候,如果直接赋值,整个页面的 dom 会被撑爆,本文主要介绍了vue实现el-select 触底分页+远程搜索的示例,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了vue中axios的post请求,415错误的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论