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 ...
随机推荐
- docker--docker基本命令使用及发布镜像
docker镜像可以完全看作一台全新的电脑使用,无论什么镜像都是对某一东西进行了配置,然后打包后可以快速移植到需要的地方直接使用 省去复杂的配置工作 比如java web项目部署,如果是新部署,需要装 ...
- SPSS函数之期和时间函数
SPSS函数之期和时间函数 CTIME.DAYS(timevalue)数值.返回 timevalue 中的天数(包括有小数位的天数),timevalue 必须为时间格式的数值或表达式,如 TIME.x ...
- 解决 win10 pycurl安装出错 Command "python setup.py egg_info" failed with error code 10 编译安装包 安装万金油
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/yexiaohhjk/article/de ...
- TIJ——Chapter Thirteen:Strings
String 对象是不可修改的,对于被String 重载的'+' 和'+=' 运算符来说,当你用它们来连接两个String 对象的时候,它在底层并不会对于每一次连接均生成一个String 对象,取而代 ...
- NDK(1)简介
AndroidNDK Android NDK 是在SDK前面又加上了“原生”二字,即Native Development Kit,因此又被Google称为“NDK”. Android程序运行在Dalv ...
- el-table中加载图片问题
<el-table-column label="头像" width="100"> <template scope="scope&qu ...
- python print函数
- HZOJ 随
这个题的题解并不想写……一个写的很详细的blog 第1个测试点:mod=2,a[i]<mod(仔细看题),则n个数字都是1,直接输出1即可. 第2个测试点:每次乘上去的数字只有一种选择,快速幂即 ...
- OpenStack组件系列☞glance简介
Glance项目提供虚拟机镜像的发现,注册,取得服务. Glance提供restful API可以查询虚拟机镜像的metadata,并且可以获得镜像. 通过Glance,虚拟机镜像可以被存储到多种存储 ...
- 出现 java.net.ConnectException: Connection refused 异常的原因及解决方法
1 异常描述 在启动 Tomcat 服务器的时候,控制台一直输出异常信息,然后停止服务器,报出如下异常: 2 异常原因 通过观察上图中被标记出来的异常信息,咱们可以知道 java.net.Connec ...