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 相关文章推荐
jQuery 使用手册(一)
Sep 23 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
JS定义类的六种方式详解
May 12 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 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
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
python3实现名片管理系统
2020/11/29 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
环境科学毕业生自荐信
2013/11/21 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
和解协议书
2014/04/16 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
节电标语大全
2014/06/23 职场文书
学校消防安全责任书
2014/07/23 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
2014年班主任工作总结
2014/11/08 职场文书
2014年营业员工作总结
2014/11/18 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
2015年体育部工作总结
2015/04/02 职场文书
学术会议通知
2015/04/15 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL