Vue-cli 构建项目 的`.vue`组件中, scss中添加背景图路径问题

【解决方法】:
更改build/utils.js文件中的 ExtractTextPlugin 的 options配置.
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', //注意: 此处根据路径, 自动更改
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
这样配置以后,在scss文件里面,引入路径为 background-image: url(../img/brokers.jpg);
.vue文件里面,按照常的绝对路径引入就好,<img src="../img/icon-wht-cash-stack.png" />

参考文章:https://www.cnblogs.com/zhangrunhao/p/7114989.html
Vue-cli 构建项目 的`.vue`组件中, scss中添加背景图路径问题的更多相关文章
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- vue 打包的项目当背景图路径错误
当背景图路径错误时: 在build/utils.js中添加或更改这句话:publicPath: '../../',
- vue webpack 打包后css背景图路径问题
最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...
- netbeans中给jpanl添加背景图片制定代码的理解——匿名内部类继承父类
此测试是为了仿照在netbeans中给jpanl添加背景图片的制定代码的执行过程 在JpDemo中定义了个Car类的数据类型,但在给其赋值对象时使用了匿名内部类,继承了Car类,是其子类,并重写了父类 ...
- angular4模块中标签添加背景图
一.现象 一个全屏的“走马灯”每项需要添加背景图,在循环标签里需要动态添加行内样式 二.解决 1.首先有一个图片数组,如: export class AppComponent { array = [& ...
- gtk中构件添加背景图
在gtk中我们总想要去给构件添加背景图,具体函数代码如下 void chang_background(GtkWidget *widget, int w, int h, const gcha r *pa ...
随机推荐
- Win10 DHCP和Static IP 切换
创建两个.bat文件,分别命名为static.bat和dhcp.bat static.bat文件写入 netsh interface ip set address "Wi-Fi" ...
- IP协议、ARP协议等之温故知新
今天才知道: 1.IP协议的固定部分长度为20字节.(貌似有一家运维工程师面试我的时候,问过我这个问题呢.) 2.IP数据包首部中的协议?? 答:协议:占8位,指出此数据报携带的数据使用何种协议以便目 ...
- Luogu 4900 食堂
一道把很多东西放在一起的练手题. $$\sum_{i = A}^{B}\sum_{j = 1}^{i}\left \{ \frac{i}{j} \right \} = \sum_{i = A}^{B} ...
- Luogu 3899 [湖南集训]谈笑风生
BZOJ 3653权限题. 这题方法很多,但我会的不多…… 给定了$a$,我们考虑讨论$b$的位置: 1.$b$在$a$到根的链上,那么这样子$a$的子树中的每一个结点(除了$a$之外)都是可以成为$ ...
- C#冒泡排序和直接插入排序
/// <summary> /// 冒泡排序 /// </summary> public static void Mainsdfdrt ...
- poj 1988 Cube Stacking (并查集)
题意:有N(N<=30,000)堆方块,开始每堆都是一个方块.方块编号1 – N. 有两种操作: M x y : 表示把方块x所在的堆,拿起来叠放到y所在的堆上. C x : 问方块x下面有多少 ...
- python核心编程第5章课后题答案
5-8Geometry import math def sqcube(): s = float(raw_input('enter length of one side: ')) print 'the ...
- 20169219 TCP_IP网络协议攻击实验报告
(1) ARP缓存欺骗 RP 缓存是 ARP 协议的重要组成部分.ARP 协议运行的目标就是建立 MAC 地址和 IP 地址的映射,然后把这一映射关系保存在 ARP 缓存中,使得不必重复运行 ARP ...
- IOS 防坑指南
1. 读写文件 1. IOS 8 中 stringWithContentsOfFile 已被移除 2. 创建文件必须放到 应用下 Documents 下面 // // FileHelper.swif ...
- linux学习之路(4)
用户身份与文件权限 通过uid来区分: 管理员 UID 为 0:系统的管理员用户. 系统用户 UID 为 1-999: Linux 系统为了避免因某个服务程序出现漏洞而被黑客提 权至整台服务器,默认 ...