vue webpack打包后图片路径错误的完美解决方法
作者:honey缘木鱼 时间:2024-05-28 16:10:33
项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css、js等资源,路径都是绝对的。
因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示。
解决办法如图:
(1).
修改 assetsPublicPath: './'
(2).打开webpack.prod.conf.js,在output:增加 publicPath: './'
虽然解决了资源路径的引用问题,但是资源里面的背景图片还是不显示, 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代码,如图所示:
添加publicPath:'../../'这一行代码,这样不论是字体还是图片的引用问题都能解决。
总结
以上所述是小编给大家介绍的vue webpack打包后图片路径错误的完美解决方法网站的支持!
来源:https://www.jianshu.com/p/9075cdff2581
标签:vue,webpack,打包,图片路径
0
投稿
猜你喜欢
检查并修复mysql数据库表的具体方法
2024-01-24 13:39:43
动态规划之矩阵连乘问题Python实现方法
2022-04-08 02:07:38
基于python实现从尾到头打印链表
2023-07-02 21:24:34
MySQL表设计优化与索引 (九)
2010-10-25 20:16:00
详解Mysql case then使用
2024-01-25 05:38:19
使用PyQt4 设置TextEdit背景的方法
2021-09-01 14:41:43
Go语言中使用反射的方法
2023-07-22 22:31:48
Python全栈之进程和守护进程
2021-11-25 18:05:44
Python实现合并excel表格的方法分析
2022-04-24 21:30:22
浅析Python打包时包含静态文件处理方法
2023-05-29 01:12:10
用python与文件进行交互的方法
2021-05-22 12:39:35
python批量修改xml文件中的信息
2022-03-29 22:50:53
JavaScript中的console.trace()函数介绍
2024-05-21 10:13:33
详解Pymongo常用查询方法总结
2022-06-01 09:13:30
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2023-10-04 04:55:53
Python合并多个Excel数据的方法
2022-11-02 06:31:33
python使用tkinter实现透明窗体
2022-09-10 00:58:40
python实现决策树
2021-11-07 19:14:05
ASP中ServerVariables集合用法详解
2007-09-14 10:26:00
PHP二维码的生成与识别案例
2023-06-14 06:48:55