Vue项目中TS引入多个.svg文件的总结

背景：
Vue-CLI创建的项目，想要用自定义的icon，icon是在阿里icon-font下载的svg文件，直接使用import xxx from '@/assets/icons/xxx.svg'TS编译报错，称无法找到此模块（插播一条小百科：svg 是使用 XML 格式定义图像）。

StackOverFlow上有人提出，在项目文件中添加一个custom.d.ts的文件，写上以下内容：

declare module '*.svg'{const content: string;export default content;
}

于是我把以上内容，加在了shims.vue.d.ts这个类似的文件里。

于是TS不报错了，console.log(xxx)结果是一个类似/img/xxx.[hash:8].svg的路径，这又是啥？我是谁？我在哪？

所以我们只解决了TS编译时的报错红线

为了能够引用svg，就要用到svg-sprite-loader
可是，JetBrain给的教程是webpack.config.js的配置，鹅vue.config.js中还得稍微翻译一下的，因为配的规则有点麻烦，建议用链式配置。

chainWebpack中文文档了解一下！

const path = require('path')      //配置需要用到路径，故引入一下module.exports = {lintOnSave: false,chainWebpack: config => {const dir = path.resolve('src/assets/icons')        //指定icon存放路径config.module.rule('svg-sprite')              //规则名   ：svg-sprite.test(/\.svg$/)                   //使用条件：.svg结尾的文件.include.add(dir).end()          //只需要对dir路径下的.svg运用此规则.use('svg-sprite-loader').loader('svg-sprite-loader').options({extract: false}).end() //规定需要用svg-sprite-loader-mod这个loader，extract: false表明，不要生成其他的文件.use('svgo-loader').loader('svg-loader').tap(options: => ({ ...options, plugins: [{ removeAttrs: { attrs: 'fill' } }] }))    //移除svg的fill属性.end()config.plugin('svg-plugin').use(require('svg-sprite-loader/plugin'), [{ plainSprite: true }])config.module.rule('svg').exclude.add(dir)       //其他目录的.svg文件，不需要用到以上规则}，pluginOptions: {}
}

svgo-loader是干嘛的呢？这来源于我的手贱，在icon-font下载.svg时，我点了其他的填充色并保存下载，这导致我引入的标签怎么点击都不变称激活色

Vue项目中TS引入多个.svg文件的总结相关推荐

在已有vue项目中半途引入cube ui组件库的使用遇到的坑(血泪)
直接进入正题(我这儿是属于cube-ui普通编译) 1,在你的vue项目中找到package.json文件安装cube-ui 终端输入命令 npm install cube-ui --save 2 ...
Vue项目中如何引入Toast插件
Vue项目中如何引入Toast插件安装vue2-toast: npm install vue2-toast -S 在main.js中全局导入vue2-toast import 'vue2-toast ...
Vue项目中，引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...
vue项目中使用a标签下载视频文件
vue项目中使用a标签下载视频文件前提条件: 1.地址为http 2.文件格式为MP4(仅代表这次项目中使用的情况) 示例代码: <el-button size="mini" ...
2021-11-26 vue项目中如何引入iconfont图标库
1.下载在iconfont官网上下载选好的项目中的图标,解压获得一个文件夹,复制其中的文件到vue项目的assets/iconfont文件夹下 2.引入在main.js中引入import '@/a ...
vue项目中如何引入阿里矢量图
1.首先去阿里矢量图官网 https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&ty ...
vue项目中如何引入ElementUI
1.在cmd中输入命令: npm i element-ui -S 2.在src/main.js文件中增加代码: import ElementUI from 'element-ui' import 'e ...
vue项目中引入monaco editor
monaco-editor概述 monaco-editor 是微软开源的一款web代码编辑器,vscode就是集成monaco-editor来实现的. 官方示例官方文档使用安装 npm安装 np ...
vue 项目中使用粘性布局不起作用_vue项目中常见问题及解决方案
webpack项目中自动引入全局scss变量文件假设我们有一个公共的scss变量文件variables.scss /*存放所有全局变量*/$card-title:#C7D200; //首页卡片标题 ...

Vue项目中TS引入多个.svg文件的总结

Vue项目中TS引入多个.svg文件的总结相关推荐

最新文章

热门文章