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 的坑的更多相关文章

  1. 在vue中使用svg sprite

    概述 这几天研究了一下在vue中使用svg sprite,有些心得,记录下来,供以后开发时参考,相信对其它人也有用. 在vue中导入svg 在vue中导入svg的方法有很多种,比如在img标签的src ...

  2. vue cli3.0使用svg全过程

    VUE-cli3使用 svg-sprite-loader svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html 1.安装依赖 npm i ...

  3. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  4. Vue CLi3入门

    摘自:https://www.jianshu.com/p/cf9b56efd3b8 Vue CLi3入门 12018.11.15 14:16:17字数 1222阅读 8895 地址 Vue CLi3 ...

  5. vue cli3以上的项目中如何使用axois请求本地json文件

    首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求 ...

  6. Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】

    Vue CLI3 移动端适配 [px2rem 或 postcss-plugin-px2rem] 今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的 ...

  7. 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求

    最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...

  8. 安装VUE Cli3 框架方法

    下面为大家介绍一下怎样安装  VUE Cli3的步骤 官网地址  https://cli.vuejs.org/zh/guide/installation.html 一.首先要检查一下是否安装node环 ...

  9. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  10. Vue CLI3 开启gzip压缩

    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compr ...

随机推荐

  1. 为何需要apigee edge

    http://apigee.com/docs/gateway-services/content/what-apigee-edge 越来越多的服务商在网上提供服务,通过各种标准的接口对来自手机.电脑.p ...

  2. hadoop生态系统默认port集合

    版权声明:本文为博主John Lau原创文章.未经博主同意不得转载 https://blog.csdn.net/GreatElite/article/details/24651569      1 H ...

  3. BigDecimal创建初始化值类型对比

    当初始化String类型和double类型,入参值相同,对比输出值 BigDecimal bigDecimalStr = new BigDecimal("0.1"); BigDec ...

  4. ubuntu16.04如何查看内存和CPU的使用情况

    ubuntu16.04如何查看内存和CPU的使用情况? 使用一下命令: gnome-system-monitor

  5. PLAY2.6-SCALA(四) 请求体解析器

    一个http请求是一个请求头后面跟着一个请求体,头部信息比较短,可以安全的缓存在内存中,在Play中头部信息使用RequestHeader类进行建模.请求体的内容可能较大,使用流stream的形式进行 ...

  6. hdu4318 最短路变形

    和hdu有一题差不多.给的是损失比,1-c%就是保存了多少,找出最大的保存率即可. #include<stdio.h> #include<iostream> #include& ...

  7. oracle表内连接和外连接

    n  概述 表连接分为内连接和外连接 n  内连接 内连接实际上就是利用where子句对两张表形成的笛卡尔集进行筛选,我们前面学习的查询都是内连接,也是在开发过程中用的最多的连接查询. 基本语法: s ...

  8. C# —— 访问修饰符

    1.public 公有的,任何代码均可以访问,应用于所有类或成员. 2.internal 内部的,只能在当前程序集中使用,应用于所有类或成员. 3.protected internal 受保护的内部成 ...

  9. [软考]之软件过程模型II 标签: 软件工程 2015-11-01 11:52 1612人阅读 评论(22) 收

    上一篇博客总结了瀑布模型/V模型/增量模型这三种软件模型,然而我们还有一个很重要的问题忘了回答,那就是,什么是软件过程模型? 什么是软件过程模型? 软件过程是软件开发与维护的工作流程和工艺流程,是软件 ...

  10. lattice planner 规划详解

    大家好,我是来自百度智能驾驶事业群的许珂诚.今天很高兴能给大家分享Apollo 3.0新发布的Lattice规划算法. Lattice算法隶属于规划模块.规划模块以预测模块.routing模块.高精地 ...