vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图:
写法:

错误:

会无端多出一个“/css/static/” 这样就会使路径错误;
解决办法:
办法一:
把不需要编译的东西,直接放在static文件下,css引用的时候直接写相对路径;
具体原因看:https://segmentfault.com/q/1010000009842688(大致是static文件夹下的东西不会经过编译)
办法二:进行wepack配置:
第一步:

第二步:

第三步:

然后 npm run build 运行打包就OK了
具体原因:自己研究,拜拜!!周五快乐!!!!!!
vue cli 打包项目造成css背景图路径错误的更多相关文章
- vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- vue 打包的项目当背景图路径错误
当背景图路径错误时: 在build/utils.js中添加或更改这句话:publicPath: '../../',
- vue webpack 打包后css背景图路径问题
最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...
- Vue-cli 构建项目 的`.vue`组件中, scss中添加背景图路径问题
[解决方法]: 更改build/utils.js文件中的 ExtractTextPlugin 的 options配置. if (options.extract) { return ExtractTex ...
- vue.js 打包时出现空白页和路径错误
vue-cli输入命令:npm run build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.ht ...
- vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- 解决Vue打包后背景图片路径错误问题
1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...
- css背景图与html插入img的区别
一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...
随机推荐
- P2147 [SDOI2008]洞穴勘测(LCT)
P2147 [SDOI2008]洞穴勘测 裸的LCT. #include<iostream> #include<cstdio> #include<cstring> ...
- fjwc2019 D6T2 密文(trie+贪心)
#194. 「2019冬令营提高组」密文 设$s[i]$表示前$i$个密文的异或和 容易发现,只要知道$s[0]~s[n](s[0]=0)$就可以知道每一位的值. 转化一下,就变成了在完全图上求最小生 ...
- Java操作Solr之SolrJ
添加SolrJ的jar包 solrj是访问Solr服务的java客户端,提供索引和搜索的请求方法,SolrJ通常在嵌入在业务系统中,通过SolrJ的API接口操作Solr服务, <depende ...
- rabbitmq heartbeat missing with heartbeat = N seconds原因总结
一直以来,在我们大规模使用rabbitmq的服务端应用中,都没有出现rabbitmq心跳超时而造成的的影响,反倒是在rabbitmq-cpp客户端出现过很多次该问题,一直以为客户端lib实现的问题(不 ...
- 【题解】Luogu P2146 [NOI2015]软件包管理器
题面:https://www.luogu.org/problemnew/lists?name=2146 这道题要用树链剖分,我博客里有对树链剖分的详细介绍 这道题就是树链剖分的模板,详细解释见程序. ...
- linux 文件同步
ref: https://www.cnblogs.com/MacoLee/p/5633650.html https://wenda.so.com/q/1505308236213470 http://b ...
- Microsoft Visual Studio 2010(vs10)安装与使用
安装1.下载软件: 云盘分享http://pan.baidu.com/s/1i4JL9GT 2.安装 打开Microsoft Visual Studio 2010目录,双击setup.exe ,运行 ...
- linux远程方式,以及基础命令
最近准备学习linux系统,购买了阿里巴巴的云服务器,系统为CentOS. 一.连接实例 1.使用管理终端. 这是阿里巴巴云服务器管理控制台,需要登录阿里巴巴,找到自己实例后,点击右侧远程连接即刻. ...
- LogStash Download
https://www.elastic.co/downloads/logstash 1.Download and unzip Logstash 2.Prepare a logstash.conf co ...
- fastqc
fastqc用于查看测序数据的质量. 1.下载: http://www.bioinformatics.babraham.ac.uk/projects/download.html#fastqc wget ...