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

Flexigrid在IE下不显示数据的有效处理方法

Sep 04 Javascript

JS简单实现城市二级联动选择插件的方法

Aug 19 Javascript

JavaScript如何实现对数字保留两位小数一位自动补零

Dec 18 Javascript

实例讲解jQuery中对事件的命名空间的运用

May 24 Javascript

JS回调函数基本定义与用法实例分析

May 24 Javascript

vue数据传递--我有特殊的实现技巧

Mar 20 Javascript

记一次vue-webpack项目优化实践详解

Feb 17 Javascript

Vue基础配置讲解

Nov 29 Javascript

微信小程序开发搜索功能实现(前端+后端+数据库)

Mar 04 Javascript

vue 使用lodash实现对象数组深拷贝操作

Sep 10 Javascript

vue动态合并单元格并添加小计合计功能示例

Nov 26 Vue.js

在 HTML 页面中使用 React的场景分析

Jan 18 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

《猛禽小队》：DC宇宙的又一超级大烂片

2020/04/09 欧美动漫

PHP实现的线索二叉树及二叉树遍历方法详解

2016/04/25 PHP

PHP实现的curl批量请求操作示例

2018/06/06 PHP

javascript 写类方式之四

2009/07/05 Javascript

javascript div 遮罩层封锁整个页面

2009/07/10 Javascript

JQuery 表格操作(交替显示、拖动表格行、选择行等)

2009/07/29 Javascript

JQuery困惑—包装集 DOM节点

2009/10/16 Javascript

深入理解JavaScript作用域和作用域链

2011/10/21 Javascript

jQuery实现文件上传进度条特效

2015/08/12 Javascript

简单学习JavaScript中的for语句循环结构

2015/11/10 Javascript

学习JavaScript设计模式(继承)

2015/11/26 Javascript

javascript显示上周、上个月日期的处理方法

2016/02/03 Javascript

jQuery源码分析之sizzle选择器详解

2017/02/13 Javascript

jQuery源码解读之extend()与工具方法、实例方法详解

2017/03/30 jQuery

JavaScript实现设置默认日期范围为最近40天的方法分析

2017/07/12 Javascript

Node.js中环境变量process.env的一些事详解

2017/10/26 Javascript

react build 后打包发布总结

2018/08/24 Javascript

vue使用v-if v-show页面闪烁,div闪现的解决方法

2018/10/12 Javascript

vue-better-scroll 的使用实例代码详解

2018/12/03 Javascript

关于python的list相关知识(推荐)

2017/08/30 Python

Python3.6使用tesseract-ocr的正确方法

2018/10/17 Python

Python远程视频监控程序的实例代码

2019/05/05 Python

python模块hashlib(加密服务)知识点讲解

2019/11/25 Python

pd.DataFrame统计各列数值多少的实例

2019/12/05 Python

dpn网络的pytorch实现方式

2020/01/14 Python

Pycharm插件(Grep Console)自定义规则输出颜色日志的方法

2020/05/27 Python

Python3获取cookie常用三种方案

2020/10/05 Python

利用css3 translate完美实现表头固定效果

2017/02/28 HTML / CSS

用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能

2016/03/15 HTML / CSS

英文简历中的自我评价用语

2013/12/09 职场文书

自我介绍演讲稿范文

2014/08/21 职场文书

2014年商场工作总结

2014/11/22 职场文书

暑期社会实践个人总结

2015/03/06 职场文书

2015年社区中秋节活动总结

2015/03/23 职场文书

举起手来观后感

2015/06/09 职场文书

用Python生成会跳舞的美女

2022/01/18 Python