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背景图片拉 ...
随机推荐
- java 之 组合模式(大话设计模式)
代码是一门艺术,每次看完大话设计模式后都会有新的认识,有时会感叹原来还可以这样玩,相信大家都用过递归,递归的使用一般遍历文件夹等会常用到, 今天讲的设计模式类似于递归,也比较神奇,先看下类图,稍后再帮 ...
- 【luogu1220】关路灯
https://www.luogu.org/problem/show?pid=1220 假如当前老张在a处跑去关掉b处的路灯,那么a与b之间的路灯都可以顺手关掉.因此每一时刻关掉的路灯必定是连续的. ...
- MySql的隔离级别和锁的关系
一.事务的4个基本特征 Atomic(原子性): 事务中包括的操作被看做一个逻辑单元.这个逻辑单元中的操作要 么所有成功.要么所有失败. Consistency(一致性): 仅仅有合法的数据能 ...
- 联动加入redmine的wik
<? php error_reporting(E_ERROR); date_default_timezone_set('Asia/Shanghai'); $red_server = " ...
- 教大家怎样给UITextView加入placeholder扩展
怎样扩展UITextView以追加placeholder功能呢? 我们的需求是:追加placeholder功能 方案讨论: 通过继承UITextView的方式 通过扩展UITextView的方式 分析 ...
- TableML-GUI篇(Excel编译/解析工具)
项目情况 本文接上篇TableML Excel编译/解析工具,本文主要介绍GUI工具的使用,及配置项,如果你想了解此工具更加详细的说明,请阅读上篇文章. 项目地址:https://github.com ...
- 自学Zabbix3.10.1-事件通知Notifications upon events-媒介类型
自学Zabbix3.10-事件通知Notifications upon events-媒介类型 zabbix触发器到了要发送通知的情况下,需要一个中间介质来接收并传递它的消息给运维们,以往用nagio ...
- Python爬虫(二十四)_selenium案例:执行javascript脚本
本章叫介绍如何使用selenium在浏览器中使用js脚本,更多内容请参考:Python学习指南 隐藏百度图片 #-*- coding:utf-8 -*- #本篇将模拟执行javascript语句 fr ...
- NanUI 0.4.4发布
NanUI是一个基于ChromiumFX开源项目的.Net Winform界面库,ChromiumFX是Chromium Embedded Framework的.Net实现.众所周知,Chromium ...
- 工作随笔——selenium支持post请求,支持自定义header
背景: 最近在写一个小程序,发现博主所在的地区访问该网站时有防ddos功能验证导致程序不能正常工作. 经过试验发现可以用国外代理ip解决这个问题,但是程序走代理访问延迟高且不稳定. 思路: selen ...