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

ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)

Aug 30 Javascript

JavaScript Math.floor方法(对数值向下取整)

Jan 09 Javascript

JS实现动态移动层及拖动浮层关闭的方法

Apr 30 Javascript

基于JavaScript实现跳转提示页面

Sep 24 Javascript

Vue.js组件tree实现无限级树形菜单

Dec 02 Javascript

详解jquery easyui之datagrid使用参考

Dec 05 Javascript

简单三步实现报表页面集成天气

Dec 15 Javascript

vue中使用cookies和crypto-js实现记住密码和加密的方法

Oct 18 Javascript

Node.js折腾记一：读指定文件夹，输出该文件夹的文件树详解

Apr 20 Javascript

微信小程序实现收货地址左滑删除

Nov 18 Javascript

vue实现在线预览pdf文件和下载（pdf.js）

Nov 26 Javascript

在vue中使用jsonp进行跨域请求接口操作

Oct 29 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

php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)

2011/03/29 PHP

刷新时清空文本框内容的js代码

2007/04/23 Javascript

js简单实现根据身份证号码识别性别年龄生日

2013/11/29 Javascript

jquery删除提示框弹出是否删除对话框

2014/01/07 Javascript

如何利用JS通过身份证号获取当事人的生日、年龄、性别

2016/01/22 Javascript

AngularJS手动表单验证

2016/02/01 Javascript

BootStrap智能表单实战系列(九)表单图片上传的支持

2016/06/13 Javascript

js创建对象几种方式的优缺点对比

2016/09/28 Javascript

NodeJs模拟登陆正方教务

2017/04/28 NodeJs

bootstrap的常用组件和栅格式布局详解

2017/05/02 Javascript

Nodejs中Express 常用中间件 body-parser 实现解析

2017/05/22 NodeJs

React-intl 实现多语言的示例代码

2017/11/03 Javascript

微信小程序实现跟随菜单效果和循环嵌套加载数据

2017/11/21 Javascript

node thread.sleep实现示例

2018/06/20 Javascript

vue移动端实现红包雨效果

2020/06/23 Javascript

JS实现Cookie读、写、删除操作工具类示例

2018/08/28 Javascript

十分钟教你上手ES2020新特性

2020/02/12 Javascript

JavaScript字符和ASCII实现互相转换

2020/06/03 Javascript

[10:49]2014国际邀请赛叨叨刀塔第二期为真正的电竞喝彩

2014/07/21 DOTA

使用Django的模版来配合字符串翻译工作

2015/07/27 Python

Python实现数据库并行读取和写入实例

2017/06/09 Python

Tensorflow 合并通道及加载子模型的方法

2018/07/26 Python

python各类经纬度转换的实例代码

2019/08/08 Python

django 多对多表的创建和插入代码实现

2019/09/09 Python

Python lambda表达式filter、map、reduce函数用法解析

2019/09/11 Python

解决Pycharm中恢复被exclude的项目问题(pycharm source root)

2020/02/14 Python

Python Django form 组件动态从数据库取choices数据实例

2020/05/19 Python

Django model class Meta原理解析

2020/11/14 Python

美国顶尖折扣时尚购物网：Bluefly

2016/08/28 全球购物

使用useBean标志初始化BEAN时如何接受初始化参数

2012/02/11 面试题

经理任命书模板

2014/06/06 职场文书

上海世博会志愿者口号

2014/06/17 职场文书

统计专业自荐书

2014/07/06 职场文书

公司董事任命书

2015/09/21 职场文书

2019教师的学习计划

2019/06/25 职场文书

pandas中关于apply+lambda的应用

2022/02/28 Python