vue webpack打包后图片路径错误的完美解决方法
作者：honey缘木鱼 发布时间：2024-05-28 16:10:33
标签：vue,webpack,打包,图片路径
项目用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
0
投稿猜你喜欢
- 本文实例讲述了javascript实现Table排序的方法。分享给大家供大家参考。具体实现方法如下：<!DOCTYPE html PU
- 前段时间在开发雨哲树网程序的时候，遇到需要转换地址中的参数，需要用到简单可逆运算的加密功能。在网上找了很多都不理想。因为我需要的这个可逆运算
- golang 原生 http 库已经可以很方便地实现一个 http server 了，但对于复杂的 web 服务来说，路由解析，请求参数解析
- 有了db模块，操作数据库直接写SQL就很方便。但是，我们还缺少ORM。如果有了ORM，就可以用类似这样的语句获取User对象：user =
- 我们经常使用nodeType==1判断元素是否是一个HMTLElement元素。页面上的元素都是节点(Node)，有元素节点(Element
- 首先mysql更新数据的某个字段，一般这样写：UPDATE mytable SET myfield = 'value' WH
- 具体代码和说明如下：upload.asp<form action=http://<％= Request.&n
Pycharm是大多数程序员都会使用的一款编程软件，可是对于新手小白对说，英文界面十分头晕。Pycharm最新版本2020.3汉化、解除汉化- 看到一段代码，如下self.batch_size = batch_size = 128初一看很诧异，仔细想想其实很合理的。在python可能
- 检测文件夹，拷贝有更新的文件到对应目录 2016.5.19亲测可用，若有借鉴请修改下文件路径；学习python小一个月后写的这个功能，属于初
- 最近游戏项目在多个国家上线，每个国家都对应两份儿svn目录（一份是本地策划目录，一份是线上目录）。于是乎维护变得很烦躁。需要先更新本地策划s
- 看到有人用的PJBlog使用的是自动填写验证码，这样其实也不使用验证码基本上没有什么区别，很容易被 * ，因此在参照许多修改的基础上，找到
- 0.触发器的基本概念触发器是一种特殊的存储过程，它在插入，删除或修改特定表中的数据时触发执行，它比数据库本身标准的功能有更精细和更复杂的数据
- Django是个好工具，使用的很广泛。 在应用比较小的时候，会觉得它很快，但是随着应用复杂和壮大，就显得没那么高效了。当你了解所用的Web框
- 自定义求导：（近似求导数的方法）让x向左移动eps得到一个点，向右移动eps得到一个点，这两个点形成一条直线，这个点的斜率就是x这个位置的近
- 我们一般在调试程序的时候，有些操作会莫名地失败，又没有错误消息提示，特别是在执行数据库操作的时候，明明执行过去了，可就是数据库里没有记录变动
- 之前跟一些小伙伴有个讨论：大概就是很多跟数据打交道的朋友都面对过很复杂的excel公式，有时嵌套层数特别多，肉眼观看很容易蒙圈。有了这样的需
- 这篇文章主要介绍了Pytest mark使用实例及原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要
- 本文代码将一些简单常用的SQL语句，拆分、封装成链式函数与终结函数，链式操作没有先后之分，实现傻瓜式mysql数据库操作。 同时学习下静态成
- 在网页中放iframe，如果frameborder=0；就没有边框显示了；但动态创建时，在IE7中就不行了，从网上找到解决的办法，写出来记录
