vue.js webpack打包后图片路径错误怎么解决?

vue.js webpack打包后图片路径错误怎么解决?下面本篇文章给大家介绍一下vue webpack打包后图片路径错误的完美解决方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

1.png

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

解决办法如图:

2.png

修改 assetsPublicPath: './'

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

3.png

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

4.png

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

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是vue.js webpack打包后图片路径错误怎么解决?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏