vue项目，使用webpack打包，虽然在全局把路径改成了相对的路径，但是图片引用的路径还是异常的，解决办法如下：

1、config文件夹下index.js中：

assetsPublicPath:"./"

背景图片的引用问题

上面虽然解决了资源路径的引用问题，但是资源里面的背景图片，不像index.html中加载资源一样，通过./static/js/app.js引用可以正常加载，图片资源是通过css加载的，如 background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2f00bf2.png) no-repeat所以我们要保留css引用图片的正常路径，即：

url(../../static/img/logo-index.2f00bf2.png) no-repeat

那么就需要修改build文件夹下的utils.js代码，如图所示：

												


											
vue项目 webpack打包后，图片路径是绝对路径的更多相关文章
	

    
						
  1. 配置vue项目将打包后图片文件的引用路径改为cdn路径?
		
    vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...
    
		
    2. 
						
  2. vue项目webpack打包后图片路径错误
		
    首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错 报的是404,路径前面多了/static/css,不知道为啥. 在自己慢 ...
    
		
    3. 
								
  3. vue项目webpack打包后修改配置文件
		
    从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js ...
    
		
    4. 
						
  4. vue项目build打包后图片路径不对导致图片空白不显示问题解决方法
		
    1.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html. 2.具体配置过程如图:  ...
    
		
    5. 
						
  5. vue 使用webpack打包后路径报错以及 alias 的使用
		
    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...
    
		
    6. 
						
  6. vue-cli webpack打包后加载资源的路径问题
		
    vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: confi ...
    
		
    7. 
						
  7. vue通过webpack打包后怎么运行
		
    1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere)  ...
    
		
    8. 
						
  8. vue项目webpack打包后有的文件big 问题
		
    vue项目打包的时候,有的big, 超过1M,   需要进行优化,方法有: 1.  非首屏图片,可以采用懒加载的方式,  如:图片的懒加载,  vue中路由的懒加载 等 2. 各个模块, 采用如sea ...
    
		
    9. 
						
  9. Vue项目用webpack打包后，预览时资源路径出错（文末有vue项目链接分享）
		
    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SecureCRT远程连接Linux下的sqlplus中退格键不能使用之解决方法
			
    ^H不是H键的意思,是backspace 主要是当你的终端backspace有问题的时候才需要设置   在linux环境下使用sqlplus,在回删(backspace)时往往会出现 一串的乱码.出现 ...
    
			
    2. 
						
  2. MyEclipse打包带源码的jar包
			
    平时开发中,我们喜欢将一些类打包成jar包,然后在别的项目中继续使用,不过由于看不到jar包里面的类的源码了,所以也就无法调试,要想调试,那么就只能通过关联源代码的形式,这样或多或少也有一些不方便,今 ...
    
			
    3. 
						
  3. 为什么排版引擎解析 CSS 选择器时一定要从右往左解析？
			
    首先我们要看一下选择器的「解析」是在何时进行的. 主要参考这篇「 How browsers work」(http://taligarsiel.com/Projects/howbrowserswork1 ...
    
			
    4. 
						
  4. 微信小程序开发8-小程序的宿主环境(1)
			
    1.小程序的运行环境分成渲染层和逻辑层,第2章提到过 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层.小程序的渲染层和逻辑层分离是经过很多考虑得出来的模型 2. 1.渲染层和数据 ...
    
			
    5. 
						
  5. Android解析WindowManagerService（二）WMS的重要成员和Window的添加过程
			
    前言 在本系列的上一篇文章中,我们学习了WMS的诞生,WMS被创建后,它的重要的成员有哪些?Window添加过程的WMS部分做了什么呢?这篇文章会给你解答. 1.WMS的重要成员 所谓WMS的重要成员 ...
    
			
    6. 
						
  6. vue3.0端口号修改
			
    module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // 生产环境是否生成 sourceMap 文件 produ ...
    
			
    7. 
						
  7. 搭建高可用mongodb集群（一）——配置mongodb
			
    在大数据的时代,传统的关系型数据库要能更高的服务必须要解决高并发读写.海量数据高效存储.高可扩展性和高可用性这些难题.不过就是因为这些问题Nosql诞生了. NOSQL有这些优势: 大数据量,可以通过 ...
    
			
    8. 
						
  8. php 3des加密 兼容JAVA 多么痛的领悟呀
			
    最近和别人做接口用到SOCKET TCP/IP方式 其中需要对账号和密码进行3DES加密 对方提供了一个加密比对的软件和JAVA的实现代码 并且给了我们一个长度为32位的密钥 这边需要用PHP来实现! ...
    
			
    9. 
						
  9. python的文件对象（1）
			
    1  首先要明确的是,文件只是连续的字节. 数据的传输经常会用到字节流,无论字节流是由单个字节还是大块数据组成. 2  打开文件之门的钥匙--open() open()内建函数成功打开文件后会返回一个 ...
    
			
    10. 
						
  10. python笔记7-多线程threading之函数式
			
    前言 1.python环境3.62.threading模块系统自带 单线程 1.平常写的代码都是按顺序挨个执行的,就好比吃火锅和哼小曲这两个行为事件,定义成两个函数,执行的时候,是先吃火锅再哼小曲,这 ...
    
			
    11.