项目用运行开发构建打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack + vuecli默认打包的css, js等资源,路径都是绝对的。
因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的静态文件夹当成了根路径,所以很多图片找不到都不显示。
解决办法如图:
(1)。
修改assetsPublicPath:“。/?/p>
(2)。打开webpack.prod.conf。js,在输出:增加publicPath:“。/?/p>
虽然解决了资源路径的引用问题,但是资源里面的背景图片还是不显示,背景:url(“. ./. ./资产/图片/logo-index.png”)不再重演;被相对打包后变成了url(静态/img/logo-index.2fbf2.png)没有重演所以我们要保留css引用图片的正常路径,即:url(. ./. ./静态/img/logo-index.2fbf2.png)没有重演
那么就需要修改构建文件夹下的utils.js代码,如图所示:
添加publicPath:“. ./. ./'这一行代码,这样不论是字体还是图片的引用问题都能解决。
以上所述是小编给大家介绍的vue webpack打包后图片路径错误的完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
