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


Posted in Javascript onDecember 07, 2018

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

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打包后图片路径错误的完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 #Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 #Javascript
使用react render props实现倒计时的示例代码
Dec 06 #Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 #Javascript
谈谈React中的Render Props模式
Dec 06 #Javascript
详解Vue-axios 设置请求头问题
Dec 06 #Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 #jQuery
You might like
php实现paypal 授权登录
2015/05/28 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
windows系统下Python环境搭建教程
2017/03/28 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
django中模板的html自动转意方法
2018/05/27 Python
python和opencv实现抠图
2018/07/18 Python
Python 使用多属性来进行排序
2019/09/01 Python
python django中8000端口被占用的解决
2019/12/17 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
python把一个字符串切开的实例方法
2020/09/27 Python
如何解决python多种版本冲突问题
2020/10/13 Python
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
《记承天寺夜游》教学反思
2014/02/16 职场文书
新年联欢会主持词
2014/03/27 职场文书
销售顾问工作计划书
2014/08/15 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
2014年英语工作总结
2014/12/20 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
单位政审意见范文
2015/06/04 职场文书
JavaScript函数柯里化
2021/11/07 Javascript