资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

vuewebpack打包后图片路径错误的完美解决方法-创新互联

项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css、js等资源,路径都是绝对的。

创新互联建站-专业网站定制、快速模板网站建设、高性价比宾阳网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式宾阳网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖宾阳地区。费用合理售后完善,10年实体公司更值得信赖。

vue webpack打包后图片路径错误的完美解决方法

因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示。

解决办法如图:

(1).

vue webpack打包后图片路径错误的完美解决方法

修改 assetsPublicPath: './'

(2).打开webpack.prod.conf.js,在output:增加 publicPath: './'

vue webpack打包后图片路径错误的完美解决方法

虽然解决了资源路径的引用问题,但是资源里面的背景图片还是不显示, 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代码,如图所示:

vue webpack打包后图片路径错误的完美解决方法

添加publicPath:'../../'这一行代码,这样不论是字体还是图片的引用问题都能解决。

总结

以上所述是小编给大家介绍的vue webpack打包后图片路径错误的完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联成都网站设计公司网站的支持!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页题目:vuewebpack打包后图片路径错误的完美解决方法-创新互联
文章链接:http://cdkjz.cn/article/cosdic.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220