【解决方法】:

更改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. sfidsk创建可启动分区问题

    前言 由于工作上需要经常要为嵌入式设备制作启动SD卡,因此本人使用sfdisk编写了自动分区.格式化和安装文件的脚本.(不选择fdisk是因为它是为用户交互设计的,在脚本上使用不够方便) 实际使用过程 ...

  2. Cunit编译安装

    1.  Examples/Makefile.am:26: to 'configure.ac' and run 'autoconf' again. configure.ac:211: error: re ...

  3. 6.Dump域内用户Hash姿势集合

    本文转自先知社区,原文链接:https://xz.aliyun.com/t/2527#toc-10 原文地址:https://pentestlab.blog/2018/07/04/dumping-do ...

  4. C#利用WMI获取 远程计算机硬盘数据

    一.利用WMI获取 远程计算机硬盘数据,先引入"System.Management.dll"文件. /// <summary>        /// 获取存储服务器硬盘 ...

  5. 第19章-使用Spring发送Email

    1 配置Spring发送邮件 Spring Email抽象的核心是MailSender接口.顾名思义,MailSender的实现能够通过连接Email服务器实现邮件发送的功能,如图19.1所示. 图1 ...

  6. Django项目运行时出现self.status.split(' ',1)[0], self.bytes_sent,ConnectionAbortedError: [WinError 10053] 你的主机中的软件中止了一个已建立的连接。

    [02/Nov/2018 09:46:51] "GET /new_industry/category HTTP/1.1" 200 2891792 Traceback (most r ...

  7. 649. Dota2 Senate

    In the world of Dota2, there are two parties: the Radiant and the Dire. The Dota2 senate consists of ...

  8. 关联关系的接口+unittest实现关联接口

    关联关系的接口: import requests def login(): url = 'http://ip/api/user/login' data = {'username':'niuhang', ...

  9. loj #6046. 「雅礼集训 2017 Day8」爷

    #6046. 「雅礼集训 2017 Day8」爷 题目描述 如果你对山口丁和 G&P 没有兴趣,可以无视题目背景,因为你估计看不懂 …… 在第 63 回战车道全国高中生大赛中,军神西住美穗带领 ...

  10. loj #6226. 「网络流 24 题」骑士共存问题

    #6226. 「网络流 24 题」骑士共存问题   题目描述 在一个 n×n\text{n} \times \text{n}n×n 个方格的国际象棋棋盘上,马(骑士)可以攻击的棋盘方格如图所示.棋盘上 ...