【解决方法】:

更改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中添加背景图路径问题的更多相关文章

  1. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  2. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

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

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

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

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

  5. vue 打包的项目当背景图路径错误

    当背景图路径错误时: 在build/utils.js中添加或更改这句话:publicPath: '../../',

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

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

  7. netbeans中给jpanl添加背景图片制定代码的理解——匿名内部类继承父类

    此测试是为了仿照在netbeans中给jpanl添加背景图片的制定代码的执行过程 在JpDemo中定义了个Car类的数据类型,但在给其赋值对象时使用了匿名内部类,继承了Car类,是其子类,并重写了父类 ...

  8. angular4模块中标签添加背景图

    一.现象 一个全屏的“走马灯”每项需要添加背景图,在循环标签里需要动态添加行内样式 二.解决 1.首先有一个图片数组,如: export class AppComponent { array = [& ...

  9. gtk中构件添加背景图

    在gtk中我们总想要去给构件添加背景图,具体函数代码如下 void chang_background(GtkWidget *widget, int w, int h, const gcha r *pa ...

随机推荐

  1. 面试题: java多线程 背1

    如果对什么是线程.什么是进程仍存有疑惑,请先Google之,因为这两个概念不在本文的范围之内. 用多线程只有一个目的,那就是更好的利用cpu的资源,因为所有的多线程代码都可以用单线程来实现.说这个话其 ...

  2. Luogu 4438 [HNOI/AHOI2018]道路

    $dp$. 这道题最关键的是这句话: 跳出思维局限大胆设状态,设$f_{x, i, j}$表示从$x$到根要经过$i$条公路,$j$条铁路的代价,那么对于一个叶子结点,有$f_{x, i, j} = ...

  3. Git代码冲突常见解决方法

    在发布这个配置文件的时候,会发生代码冲突: error: Your local changes to the following files would be overwritten by merge ...

  4. struct stat中的mode_t

    mode_t是无符号整形.它由 S_IRUSR S_IWUSR S_IXUSR S_IRGRP S_IWGRP S_IXGRP S_IROTH S_IWOTH S_IXOTH几个按位或而的来:所得到的 ...

  5. 综合学生信息管理系统(JSP+JDBC)

    原创 通过JSP+JDBC制作一个简单的操作数据库中表信息的系统. 总体界面如下,一共有5个功能块. 功能一:列出全部学生 功能二:按条件查询学生 功能三:新添加学生 功能四:按条件删除学生 功能五: ...

  6. 组合(Composite)模式 *

    组合(Composite)模式:将对象组合树形结构以表示‘部分-整体’的层次结构. 组合模式使得用户对单个对象和组合对象具有一致性 /* * 抽象构件(Component)角色:这是一个抽象角色,它给 ...

  7. ComicEnhancerPro 系列教程十七:二值化图像去毛刺

    作者:马健邮箱:stronghorse_mj@hotmail.com 主页:http://www.comicer.com/stronghorse/ 发布:2017.07.23 教程十七:二值化图像去毛 ...

  8. MS SQL Server计算间隔时间

    开始需要,写了一个计算时间间隔的函数,可以参考: 得到的结果: 再列举一个例子:

  9. 《Thinking in Java》 10~

    chapter 10 内部类(P191) 创建内部类 链接到外部类 内部类能访问器外围对象的所有成员,而不需要任何特殊条件. 使用.this与.new package cn.test; public ...

  10. OC 术语表

    术语表 本附录包含了很多会用到的非正式定义术语.有些术语与Obective-C语言有关,其他术语则有自己的语源,来自面向对象程序设计的规范.在后一种情况中,术语的含义只有明确应用于Obective-C ...