vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404
在vue-cli项目中build/utils.js中找到如下代码块,添加 
publicPath:’../../’
if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../' //添加这句话
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
css中引用的图片地址有问题,需要返回上两级目录,修改后重新打包即可
vue build打包后css里的图片路径404不正确的问题的更多相关文章
- 关于npm run build打包后css样式中的图片失效的问题(如background)
		
平时run dev都能正常显示的css背景图片在npm run build打包后竟然不显示了(写在标签对中的图片都可以正常显示),而且dist/static/img目录下是确实有这张图片的,于是查看打 ...
 - vue webpack打包后.css文件里面的背景图片路径错误解决方法
		
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
 - vue webpack 打包后css背景图路径问题
		
最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...
 - vue项目打包后css背景图路径不对的问题
		
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
 - vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
		
使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...
 - vue项目打包后图片路径问题
		
当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run build : 打 ...
 - vue --- cli build 后的项目,图片路径出错
		
今天在插入背景图片过程中,遇到了路径错误的问题,通过网上查询,找到了解决的办法,但是大部分都没有讲造成这种问题的原因,故我简单地总结了一下,并加入了一些自己的理解,欢迎共同探讨~ 当用vue-cli自 ...
 - Xcode: Run Script 的运用, 使build打包后自动+1
		
背景: 每次打包都要build+1处理,比较麻烦,使用 Run Script 的运用使build打包后自动+1 0. 使用xcode 添加run Script 然后就可以添加Run Script了 1 ...
 - npm run build 打包后,如何运行在本地查看效果(Nginx服务)
		
这段时间,研究了一下vue 打包的很慢的问题.但是当我 npm run build 打包后,在本地查看效果的时候,活生生被我老大鄙视了,因为我打开了XAMPP.他说:你怎么不用Nginx啊?用这个一堆 ...
 
随机推荐
- Eclipse配置问题
			
1.eclipse中通过search打开第二个文件时第一个文件自动关闭问题: 解决方案: window-preferences-general-search找到第一行的一个选项 reuse edit ...
 - jmeter ---断言持续时间(Duration to Assert )和断言文件大小
			
jmeter ---断言持续时间(Duration to Assert )和断言文件大小 1.断言持续时间(Duration to Assert ) Duration to Assert -- 允许的 ...
 - 学习笔记: jstack与线程状态
			
jstatck可以打印JVM内部所有线程 1.查看有哪些java进程 2.查看所有线程的信息 重定向到5579.txt文件中 jstack 5579 > 5579.txt 3.线程的状态 New ...
 - 阅读<<HDMI 1.4/2.0 Transmitter Subsystem V2.0>>笔记
			
阅读<<HDMI 1.4/2.0 Transmitter Subsystem V2.0>>笔记 1.Subsystem Block Diagram 2.HDMI TX Subs ...
 - [转]Eclipse快捷键 10个最有用的快捷键
			
Eclipse快捷键 10个最有用的快捷键 5 4 Eclipse中10个最有用的快捷键组合 一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的 ...
 - Gradle详细解析***
			
前言 对于Android工程师来说编译/打包等问题立即就成痛点了.一个APP有多个版本,Release版.Debug版.Test版.甚至针对不同APP Store都有不同的版本.在以前ROM的环境下, ...
 - WPF Demo19 命令、UC
			
命令系统的基本元素和关系WPF命令系统的组成要素:A.命令(command):WPF命令实际上就是实习了ICommand接口的类.平时使用最多的就是RoutedCommand类.B.命令源(comma ...
 - adb调试android设备 说的比较清楚的一篇文章
			
ADB支持两种连接Android系统的方式,USB方式及网络方式.一般手机及平板默认会设置为USB方式.android系统底层运行着一个服务(adbd),用于相应和管理大家在电脑端的adb命令连接,这 ...
 - IDEA运行tomcat8.5.35源代码
			
前提环境,安装和配置好java1.8+环境,maven,IDEA 1.下载Tomcat源代码:https://tomcat.apache.org/download-80.cgi#8.5.35 2.创建 ...
 - 微服务之分布式跟踪系统(springboot+zipkin+mysql)
			
通过上一节<微服务之分布式跟踪系统(springboot+zipkin)>我们简单熟悉了zipkin的使用,但是收集的数据都保存在内存中重启后数据丢失,不过zipkin的Storage除了 ...