vue-cli3 使用 svg-sprite-loader 的坑
chainWebpack: config => {
config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
//const svgRule = config.module.rule('svg')
//svgRule.uses.clear()
config.module
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/icons')) //处理svg目录
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
},
上面代码出自 https://juejin.im/post/5bc93881f265da0aea69ae2e
vue-cli3 的配置svg-sprite-loader大多都是上面这样的。
但是我自己写的时候会在node_modules里有个svg导致一直报错!!!
最终解决!! 出自https://blog.csdn.net/qq_31201781/article/details/85257591
chainWebpack: config => {
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end();
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
});
},
vue-cli3 使用 svg-sprite-loader 的坑的更多相关文章
- 在vue中使用svg sprite
概述 这几天研究了一下在vue中使用svg sprite,有些心得,记录下来,供以后开发时参考,相信对其它人也有用. 在vue中导入svg 在vue中导入svg的方法有很多种,比如在img标签的src ...
- vue cli3.0使用svg全过程
VUE-cli3使用 svg-sprite-loader svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html 1.安装依赖 npm i ...
- 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...
- Vue CLi3入门
摘自:https://www.jianshu.com/p/cf9b56efd3b8 Vue CLi3入门 12018.11.15 14:16:17字数 1222阅读 8895 地址 Vue CLi3 ...
- vue cli3以上的项目中如何使用axois请求本地json文件
首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求 ...
- Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】
Vue CLI3 移动端适配 [px2rem 或 postcss-plugin-px2rem] 今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的 ...
- 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求
最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...
- 安装VUE Cli3 框架方法
下面为大家介绍一下怎样安装 VUE Cli3的步骤 官网地址 https://cli.vuejs.org/zh/guide/installation.html 一.首先要检查一下是否安装node环 ...
- vue cli3.0 结合echarts3.0和地图的使用方法
echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...
- Vue CLI3 开启gzip压缩
gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compr ...
随机推荐
- JS BOM 窗口中的使用
1,弹框的种类 2,打开一个新页面 子窗口操作父窗口,打开新窗口显示内容open("opener.html","haha","width=300,he ...
- 利用 JavaScript SDK 部署网页版“Facebook 登录”
facebook开发者平台https://developers.facebook.com/ 利用 JavaScript SDK 部署网页版“Facebook 登录” 通过采用 Javascript 版 ...
- material-ui里面的withStyles是什么?
export default withStyles(styles, { name: 'MuiAppBar' })(AppBar); //这里的作用是什么? withStyles 是一个 HOC 组件, ...
- QT QSettings读写配置文件
QT QSettings读写配置文件 需要用一个配置文件来保存程序的初始值,同时也需要做保存修改后的值. 那么借助于QSetting 就可以达到目的. 注意,生成的是 ini 文件! //1.创建和读 ...
- jQuery第3天
复习 如何区别 JS DOM对象和 JQ 包装对象? JQ对象其实是经过包装的DOM对象,包装后可调用 JQ 的方法. JS 对象基本上都是属性为主,JQ基本上都方法为主. 可通过 console.d ...
- UDP传输对象--JavaSE考试题
Server.java package com.sxt.udp.object; import java.io.ByteArrayInputStream; import java.io.ObjectIn ...
- HZOJ 毛一琛
直接暴搜是$3^n$的,无法接受. 正解是$meet \ in \ the \ middle$,暴搜前n/2个数,每个数的状态有三种:都不选,选为A集合,选为B集合.那么我们可以维护两个集合的差. 设 ...
- Skiing 2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛H题(拓扑序求有向图最长路)
参考博客(感谢博主):http://blog.csdn.net/yo_bc/article/details/77917288 题意: 给定一个有向无环图,求该图的最长路. 思路: 由于是有向无环图,所 ...
- 查看JAVA占用CPU高的线程日志
# . 查看主进程占用cpu高 top # java # . 按照线程占用cpu由高到低进行排查: -o THREAD,tid, # USER %CPU PRI SCNT WCHAN USER SYS ...
- oracle函数 chartorowid(c1)
[功能]转换varchar2类型为rowid值 [参数]c1,字符串,长度为18的字符串,字符串必须符合rowid格式 [返回]返回rowid值 [示例] SELECT chartorowid('AA ...