【解决方法】:

更改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. SHELL读取 ini 格式文件做配置文件

    ini文件格式一般都是由节.键.值三部分组成 格式: [第一节 ] 第一个键 = 值 第二个键 = 第二个值 [第二节 ] 第一个键 = val1,val2,val3 例子: [COM] KINGGO ...

  2. 面向对象property属性、静态方法和类方法

    一.property属性 1.什么是property特性? property是一种特殊的属性,访问它时会执行一段功能(函数)然后返回值. from math import pi class Circl ...

  3. eclipse——Maven创建JavaWeb工程

    打包方式改为war 问题:webapp目录下缺少web.xml文件 先勾选掉Dynamic Web Services 点击Applay 再勾选上Dynamic Web Services ,目的是为了产 ...

  4. Python 面向对象class(2)

    Python 面向对象 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没有接触过 ...

  5. Monkey稳定性测试环境搭建说明

    一.安装Java环境 安装Java环境-JDK:下载地址:http://pan.baidu.com/s/1pJ6Yqs7,jdk安装解压即可. 二.设置环境变量 双击下载的JDK ,设置安装路径.这里 ...

  6. What is the AppData folder?

    Applies to Windows 8.1, Windows RT 8.1 The AppData folder contains app settings, files, and data spe ...

  7. URAL 1748. The Most Complex Number(反素数)

    题目链接 题意 :给你一个n,让你找出小于等于n的数中因子个数最多的那个数,并且输出因子个数,如果有多个答案,输出数最小的那个 思路 : 官方题解 : (1)此题最容易想到的是穷举,但是肯定超时. ( ...

  8. 《深度学习原理与TensorFlow实践》喻俨,莫瑜

    1. 深度学习简介 2. TensorFlow系统介绍 3. Hello TensorFlow 4. CNN看懂世界 5. RNN能说会道 6. CNN LSTM看图说话 7. 损失函数与优化算法 T ...

  9. [LintCode笔记了解一下]39.恢复旋转排序数组

    思路: 1.需要O(n)的事件复杂度,所以多次循环不考虑 2.四步翻转法 -第一步,找到数组里最小的那个数字,因为是旋转排序数组,所以只要找到某个位置arr[i]>arr[i+1]的话,就找到了 ...

  10. 自建脚手架之配置中心--LightConf的实现

    常规项目开发过程中, 通常会将配置信息位于在项目resource目录下的properties文件文件中, 配置信息通常包括有: jdbc地址配置.redis地址配置.活动开关--等等.因此每次上线或者 ...