原问题

#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背景图样式终极解决方法的更多相关文章

  1. vue 使用v-html指令渲染的富文本无法修改样式的解决方法

    最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式 解决方法: 把需要添加或重置的样式单独放在一个style标签里, 定义为全局样式,代码如下: <style> ...

  2. vue的挖坑和爬坑之vuex的简单入门

    首先vuex的中文文档https://vuex.vuejs.org/zh-cn/ 首先vuex是什么,官方解释是 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应 ...

  3. css背景图与html插入img的区别

    一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...

  4. Lodop打印控件不打印css背景图怎么办

    background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...

  5. html的css背景图的repeat

    HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...

  6. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  7. vue webpack 打包后css背景图路径问题

    最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...

  8. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

  9. CSS背景图拉伸自适应尺寸,全浏览器兼容

    突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...

随机推荐

  1. struts2 谷歌浏览器保存date类型数据时报错

    一同事发现一个bug,在chrome上保存一个表单时,后台会报错,而在firefox上则可以正常保存. 奇怪的地方在于,后端的程序是同一个,而在浏览器上查看请求header时,两个浏览器对应的字段内容 ...

  2. postgres 9.5 FDW变化

    9.5主要是2个方法有变动: create_foreignscan_path extern ForeignPath *create_foreignscan_path(PlannerInfo *root ...

  3. C#复习资料

    C#期末考试复习题 一.单项选择题(每小题2分,共20分) 1.在类作用域中能够通过直接使用该类的(   )成员名进行访问. A. 私有      B. 公用      C. 保护      D. 任 ...

  4. 一种使用GDI+对图片尺寸和质量的压缩方法

    今天同事向我询问图片压缩的算法.我想起大概两三年前做过的一个项目. 当中包括了尺寸和质量两种压缩算法.而且支持JPEG.bmp.PNG等格式. 今天把这段逻辑贴出来,供大家參考.(转载请指明来源于br ...

  5. 两个port贴合七夕主题,百度输入法的“情感营销”策略

        一年一度的七夕佳节是情侣.夫妻之间传情达意.诉说衷肠的最佳时节.基于这一背景.一些传统企业.互联网公司也会针对性的推出一些营销策划,使产品和服务更贴近用户需求,更"接地气" ...

  6. IIS中遇到无法预览的问题(HTTP 错误 401.3 - Unauthorized 因为 Web server上此资源的訪问控制列表(ACL)配置或加密设置,您无权查看此文件夹或页面。)

    在IIS中  依次运行例如以下操作: 站点--编辑权限--共享(为了方便能够直接将分享对象设置为everyone)--安全(直接勾选 everyone )--应用--确定.

  7. nat的翻译类型(2)--动态nat

    目的:在1.1 1.2 1.3 三台内网的服务器访问外网的服务器(202.1.1.2)时,将内网ip转换为外网ip. 1.设置内网三台服务器的Ip ,网关,以及外网服务器的ip网关 分别为:192.1 ...

  8. VirtualBox 安装 Ubuntu 14.04 无法调节分辨率问题

    基础环境 宿主系统:Windows 10 虚拟机系统:Ubuntu 14.04-32bit.Ubuntu 14.04-64bit VirtualBox:5.2.0 r118431 (Qt5.6.2) ...

  9. Shell编程中的变量作用域

    有两个shell脚本文件: a.sh name=Tom echo $name ./b.sh b.sh echo "name in b.sh:"$name 运行./a.sh时输出结果 ...

  10. Intellij idea 复制粘贴查找快捷键失效

    遇到此问题,竟不能复制, 发现原因,是因为勾选了Vim模式, Tools,Vim Emulator,前面会有一个√,取消即可,如图: 我的是这个原因,复制粘贴快捷键失效,也有可能历史粘贴板的深度不够 ...