编程 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入门学习书籍推荐

Jun 12 Javascript

js自动查找select下拉的菜单并选择(示例代码)

Feb 26 Javascript

javascript继承机制实例详解

Nov 20 Javascript

jQuery中andSelf()方法用法实例

Jan 08 Javascript

javascript框架设计之框架分类及主要功能

Jun 23 Javascript

JS实现转动随机数抽奖特效代码

Apr 16 Javascript

学习Node.js模块机制

Oct 17 Javascript

深入理解 JavaScript 中的 JSON

Apr 06 Javascript

微信小程序实现瀑布流布局与无限加载的方法详解

May 12 Javascript

node文件批量重命名的方法示例

Oct 23 Javascript

Layui 设置select下拉框自动选中某项的方法

Aug 14 Javascript

vue 自定义提示框(Toast)组件的实现代码

Aug 17 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

使用apache模块rewrite_module (转)

2007/02/14 PHP

PHP-CGI远程代码执行漏洞分析与防范

2017/05/07 PHP

PHP检查网站是否宕机的方法示例

2017/07/24 PHP

关于Yii中模型场景的一些简单介绍

2019/09/22 PHP

php实现图片压缩处理

2020/09/09 PHP

css值转换成数值请抛弃parseInt

2011/10/24 Javascript

下载文件个别浏览器文件名乱码解决办法

2013/03/19 Javascript

Javascript倒计时页面跳转实例小结

2013/09/11 Javascript

jQuery取得设置清空select选择的文本与值

2014/07/08 Javascript

Javascript实现获取窗口的大小和位置代码分享

2014/12/04 Javascript

jquery实现的Banner广告收缩效果代码

2015/09/02 Javascript

node.js抓取并分析网页内容有无特殊内容的js文件

2015/11/17 Javascript

学好js，这些js函数概念一定要知道【推荐】

2017/01/19 Javascript

基于React实现表单数据的添加和删除详解

2017/03/14 Javascript

Angular2开发——组件规划篇

2017/03/28 Javascript

jquery与js实现全选功能的区别

2017/06/11 jQuery

详解Vue路由History mode模式中页面无法渲染的原因及解决

2017/09/28 Javascript

JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解

2017/10/25 Javascript

详解vue-cli中模拟数据的两种方法

2018/07/03 Javascript

如何使用vuex实现兄弟组件通信

2018/11/02 Javascript

vue递归组件实战之简单树形控件实例代码

2019/08/27 Javascript

layui点击数据表格添加或删除一行的例子

2019/09/12 Javascript

Python中使用摄像头实现简单的延时摄影技术

2015/03/27 Python

浅析Python中的多重继承

2015/04/28 Python

python实现多线程的方式及多条命令并发执行

2016/06/07 Python

Python实现的弹球小游戏示例

2017/08/01 Python

详解Python 函数如何重载？

2019/04/23 Python

python基础 range的用法解析

2019/08/23 Python

浅谈tensorflow中Dataset图片的批量读取及维度的操作详解

2020/01/20 Python

Python+Django+MySQL实现基于Web版的增删改查的示例代码

2020/05/13 Python

Jogun Shop中文官网：韩国知名时尚男装网站

2016/10/12 全球购物

医护人员英文求职信范文

2013/11/26 职场文书

电气个人求职信范文

2014/02/04 职场文书

学生检讨书范文

2019/06/24 职场文书

SONY600GR，国产收音机厂商永远的痛

2022/04/05 无线电

怎么禁用Win11输入法最新Win11输入法关闭教程

2022/08/05 数码科技