编程 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 相关文章推荐

在Javascript中定义对象类别

Dec 22 Javascript

番茄的表单验证类代码修改版

Jul 18 Javascript

IE JS编程需注意的内存释放问题

Jun 23 Javascript

ExtJs Excel导出并下载IIS服务器端遇到的问题

Sep 16 Javascript

调用HttpHanlder的几种返回方式小结

Dec 20 Javascript

jquery的ajax简单结构示例代码

Feb 17 Javascript

Js冒泡事件详解及阻止示例

Mar 21 Javascript

Javascript实现通过选择周数显示开始日和结束日的实现代码

May 30 Javascript

JavaScript省市级联下拉菜单实例

Feb 14 Javascript

Angular.js去除页面中显示的空行方法示例

Mar 30 Javascript

JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】

Feb 21 Javascript

node中使用shell脚本的方法步骤

Mar 23 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

PL-880隐藏功能

2021/03/01 无线电

ueditor 1.2.6 使用方法说明

2013/07/24 PHP

laravel框架邮箱认证实现方法详解

2019/11/22 PHP

PHP终止脚本运行三种实现方法详解

2020/09/01 PHP

PHP执行linux命令6个函数代码实例

2020/11/24 PHP

Javascript SHA-1：Secure Hash Algorithm

2006/12/20 Javascript

jquery 单击li防止重复加载的实现代码

2010/12/24 Javascript

关于COOKIE个数与大小的问题

2011/01/17 Javascript

JQuery中html()方法使用不当带来的陷阱

2011/04/07 Javascript

Jquery动态更改一张位图的src与Attr的使用

2013/07/31 Javascript

在firefox和Chrome下关闭浏览器窗口无效的解决方法

2014/01/16 Javascript

jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码

2015/09/09 Javascript

javascript匀速动画和缓冲动画详解

2016/10/20 Javascript

VUE-Table上绑定Input通过render实现双向绑定数据的示例

2018/08/27 Javascript

详解js 创建对象的几种方法

2019/03/08 Javascript

使用 vue 实现灭霸打响指英雄消失的效果附demo

2019/05/06 Javascript

vue-resourc发起异步请求的方法

2020/02/11 Javascript

Element Alert警告的具体使用方法

2020/07/27 Javascript

[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18

2018/08/19 DOTA

[01:05:29]DOTA2-DPC中国联赛正赛 PSG.LGD vs Aster BO3 第二场 1月24日

2021/03/11 DOTA

[06:59]DOTA2-DPC中国联赛3月7日Recap集锦

2021/03/11 DOTA

python开发的小球完全弹性碰撞游戏代码

2013/10/15 Python

Python yield 小结和实例

2014/04/25 Python

Python构造函数及解构函数介绍

2015/02/26 Python

django批量导入xml数据

2016/10/16 Python

python装饰器简介---这一篇也许就够了(推荐)

2019/04/01 Python

Python通过递归函数输出嵌套列表元素

2020/10/15 Python

荷兰领先的百货商店：De Bijenkorf

2018/10/17 全球购物

JNI的定义

2012/11/25 面试题

视图的作用

2014/12/19 面试题

运动会解说词100字

2014/01/31 职场文书

小学生开学感言

2014/02/28 职场文书

单位更名证明

2015/06/18 职场文书

门面租赁合同范文

2019/08/06 职场文书

遇事可以测出您的见识与格局

2019/09/16 职场文书

详细谈谈JavaScript中循环之间的差异

2021/08/23 Javascript