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 ...
随机推荐
- CentOS双网卡双IP设置
CentOS双网卡双IP设置 系统环境:CentOS Linux 网络环境: 两个IP地址,192.168.0.10和10.10.30.2,掩码是255.255.255.0,这两个子网的网关地址分别是 ...
- Hyperledger Fabric Ordering Service过程
排序服务在超级账本 Fabric 网络中起到十分核心的作用.所有交易在发送给 Committer 进行验证接受之前,需要先经过排序服务进行全局排序. 在目前架构中,排序服务的功能被抽取出来,作为单独的 ...
- 30.MIN() 函数
MIN() 函数 MIN 函数返回一列中的最小值.NULL 值不包括在计算中. SQL MIN() 语法 SELECT MIN(column_name) FROM table_name 注释:MIN ...
- Oracle数据库之单表查询
接着上一篇的分享,今天主要给大家分享的是关于数据中的单表查询,单表查询很基础,也很重要,但是任何一个初学者必须要掌握的姿势,单表查询就是对单个表进行操作,查询我们想要的数据.单表查询里面的内容也是比较 ...
- URAL 1356. Something Easier(哥德巴赫猜想)
题目链接 题意 : 给你一个数n,让你找出几个素数,使其相加为n,输出这些素数. 思路 : 哥德巴赫猜想 : 任何一个大于 6的偶数都可以表示成两个素数之和. 任何一个大于9的奇数都可以表示成三个素数 ...
- Eclipse中连接数据库错误:com.microsoft.sqlserver.jdbc.SQLServerException: 之类的错误
原创 错误:org.apache.jasper.JasperException: Unable to compile class for JSP 原因是页面指令中 import="java. ...
- 使用Recyclerview实现图片水平自动循环滚动
简介: 本篇博客主要介绍的是如何使用RecyclerView实现图片水平方向自动循环(跑马灯效果) 效果图: 思路: 1.准备m张图片 1.使用Recyclerview实现,返回无数个(实际Inter ...
- db2中临时表在存储过程中的使用
DROP PROCEDURE ADMINISTRATOR.SP_TEST (INTEGER, CHARACTER ()); CREATE PROCEDURE administrator.sp_test ...
- Vue 父组件向子组件传值,传方法,传父组件整体
父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...
- iOS应用打包完后再在开发者网站添加应用测试ID能够加入测试吗
1.明确指出 不行: 1.打包测试包前一定要先添加测试设备的UDID 2.添加测试的设备UDID一定要先于打包测试包,否则设备无法参加测试 3.使用蒲公英分享测试包,查看可参加测试的设备UDID 2. ...