vue的挖坑和爬坑之css背景图样式终极解决方法
原问题
#wrapper{
width:100%;
height:100%;
position:fixed;
background-image:url(./img/open_bg.jpg)
}
在.vue文件中的CSS样式中,使用背景图
在webpack打包后,路径不对,怎么办呢?
回答
如果你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: '../../'
解释
文件最终会打包压缩为js。当运行的时候,css中的相对路径指向已经发生变化指向了根目录,所以出现加载错误的问题。
下面是这个插件的解释。
extract-text-webpack-plugin
作用:该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
插件参数:该插件有三个参数意义分别如下:
use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback:编译后用什么loader来提取css文件
publicfile:用来覆盖项目路径,生成该css文件的文件路径
来源
https://www.zhihu.com/question/39953434
vue的挖坑和爬坑之css背景图样式终极解决方法的更多相关文章
- vue 使用v-html指令渲染的富文本无法修改样式的解决方法
最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式 解决方法: 把需要添加或重置的样式单独放在一个style标签里, 定义为全局样式,代码如下: <style> ...
- vue的挖坑和爬坑之vuex的简单入门
首先vuex的中文文档https://vuex.vuejs.org/zh-cn/ 首先vuex是什么,官方解释是 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应 ...
- css背景图与html插入img的区别
一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...
- Lodop打印控件不打印css背景图怎么办
background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...
- html的css背景图的repeat
HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- vue webpack 打包后css背景图路径问题
最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...
- vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- CSS背景图拉伸自适应尺寸,全浏览器兼容
突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...
随机推荐
- snprintf 返回值陷阱 重新封装
snprintf()函数用于将格式化的数据写入字符串,其原型为: int snprintf(char *str, int n, char * format [, argument, ...]); st ...
- 【NOIP2009提高组】最优贸易
https://www.luogu.org/problem/show?pid=1073 如果他想在i点卖出,那么就要在从1点出发到i点的路径里找个最便宜的买入,用Bellman-Ford求出这样最便宜 ...
- 二叉树的递归遍历 Tree UVa548
题意:给一棵点带权的二叉树的中序和后序遍历,找一个叶子使得他到根的路径上的权值的和最小,如果多解,那该叶子本身的权值应该最小 解题思路:1.用getline()输入整行字符,然后用stringstre ...
- ssm整合(基于xml配置方式)
本文是基于xml配置的方式来整合SpringMVC.Spring和Mybatis(基于注解的方式会再写一篇文章),步骤如下: (1)首先自然是依赖包的配置文件 pom.xml <project ...
- 》》canvas时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Swift 是猴还是猿?
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:段义鹏 导语 Swift和Objective-C是目前开发 Apple App的两门主要语言.Swift自2014年发布到目前为止其行业 ...
- Ubuntu 报错 sudo: unable to resolve host
Ubuntu 在每次执行命令的时候,会报如下错误: $ sudo sudo: unable to resolve host iZ2zecsdy8flu603bmdg1bZ iZ2zecsdy8flu6 ...
- ASP.NET Core 指定环境发布(hosting environment)
ASP.NET Core 应用程序发布命令: dotnet publish [<PROJECT>] [-f|--framework] [-r|--runtime] [-o|--output ...
- JAVA9模块化详解(二)——模块的使用
JAVA9模块化详解(二)--模块的使用 二.模块的使用 各自的模块可以在模块工件中定义,要么就是在编译期或者运行期嵌入的环境中.为了提供可靠的配置和强健的封装性,在分块的模块系统中利用他们,必须确定 ...
- 《决战大数据:驾驭未来商业的利器》【PDF】下载
内容简介 大数据时代的来临,给当今的商业带来了极大的冲击,多数电商人无不"谈大数据色变",并呈现出一种观望.迷茫.手足无措的状态.车品觉,作为一名经验丰富的电商人,在敬畏大数据的同 ...