编程 Javascript

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

Posted in Javascript onDecember 07, 2018

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

因为我们的图片路径都是经历过文件夹的，在本地引用图片是绝对路径，但打包后因为把配置的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打包后图片路径错误的完美解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

honey缘木鱼

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JSON 学习之完全手册图文

May 29 Javascript

jquery实用代码片段集合

Aug 12 Javascript

jquery选择器的选择使用及性能介绍

Jan 16 Javascript

基于jquery实现控制经纬度显示地图与卫星

May 20 Javascript

jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后

Sep 29 Javascript

详解JavaScript中setSeconds()方法的使用

Jun 11 Javascript

js贪吃蛇网页版游戏特效代码分享（挑战十关）

Aug 24 Javascript

JavaScript中Function函数与Object对象的关系

Dec 17 Javascript

JS解决position:sticky的兼容性问题的方法

Oct 17 Javascript

使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能

Oct 18 Javascript

javascript面向对象程序设计实践常用知识点总结

Jul 29 Javascript

详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()

May 12 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

肝肠寸断了解下!盘点史上最伤心的十大动漫

2020/03/04 日漫

PHP4.04简明安装

2006/10/09 PHP

PHP获取数组长度或某个值出现次数的方法

2015/02/11 PHP

关于laravel框架中的常用目录路径函数

2019/10/23 PHP

有一段有意思的代码-javascript现实多行信息

2007/08/26 Javascript

jquery实现文本框鼠标右击无效以及不能输入的代码

2010/11/05 Javascript

简单的前端js+ajax 购物车框架(入门篇)

2011/10/29 Javascript

使用Jquery来实现可以输入值的下拉选单雏型

2011/12/06 Javascript

node.js中使用node-schedule实现定时任务实例

2014/06/03 Javascript

当jquery ajax遇上401请求的解决方法

2016/05/19 Javascript

vue.js将unix时间戳转换为自定义时间格式

2017/01/03 Javascript

bootstrap制作jsp页面（根据值让table显示选中）

2017/01/05 Javascript

Ajax高级笔记 JavaScript高级程序设计笔记

2017/06/22 Javascript

使用vue完成微信公众号网页小记(推荐)

2019/04/28 Javascript

Vue 中使用lodash对事件进行防抖和节流操作

2020/07/26 Javascript

Vue的Options用法说明

2020/08/14 Javascript

Vue父子组件传值的一些坑

2020/09/16 Javascript

python使用PyGame绘制图像并保存为图片文件的方法

2015/04/24 Python

Python处理PDF及生成多层PDF实例代码

2017/04/24 Python

详谈Python3 操作系统与路径模块(os / os.path / pathlib)

2018/04/26 Python

python中的turtle库函数简单使用教程

2018/07/23 Python

从numpy数组中取出满足条件的元素示例

2019/11/26 Python

对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解

2020/02/11 Python

python filecmp.dircmp实现递归比对两个目录的方法

2020/05/22 Python

python字典的值可以修改吗

2020/06/29 Python

通过实例了解python__slots__使用方法

2020/09/14 Python

python自动生成sql语句的脚本

2021/02/24 Python

大学生毕业求职的自我评价

2013/09/29 职场文书

实习生个人的自我评价

2013/12/08 职场文书

大学校园毕业自我鉴定

2014/01/15 职场文书

中国梦演讲稿开场白

2014/08/28 职场文书

小学运动会报道稿

2014/10/04 职场文书

婚内分居协议书范文

2014/11/26 职场文书

个人自荐书怎么写

2015/03/26 职场文书

2019年大学生暑期社会实践调查报告模板

2019/11/07 职场文书

Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度

2022/04/14 Python