vue2引入svg-sprite-loader踩坑之路

起因：在掘金收集了一些好看的组件ui，并看了比较多造轮子的文章，对此有所感触，于是闲着也是闲着，想用vue2玩玩造轮子，搭建项目、配置包等操作完成后一切岁月静好直到想引入svg格式的icon文件，踩坑之路开始了...

温馨提示：如何解决请看最后总结

第一个坑

配置

• 通过查阅文章，总结出来主流引入svg的方法还是安装svg-sprite-loader，通过配置vue.config.js，实现对svg-sprite-loader的配置
• 再通过main.js入口文件进行全局组件注册，从而达到全局使用的效果，在components文件夹下新建icons文件夹，对于svg文件进行统一处理，再创建svgs对svg文件进行存储

报错

• 跟着一步一步操作后，运行serve命令，不出意外终端报错了：找不到icons和svgs
• 通过google和掘金搜索后基本找不到相同错误，于是检查文件和文件夹是否保存以及import写对没有，发现没问题
• 尝试卸载包重新装：删除整个node_modules文件夹后重新install，但还是报相同错误

再次尝试

• 再次查看别的文章，重新配置svg-sprite-loader，重新添加icon和svgs文件夹和svg文件，再次serve
• 这次报错是：config.module.rule(...).text is not a function还是配置出错，这个东西不是一个函数

找到原因

• 找到一篇博客，大概介绍的是他把别人的代码放到自己的电脑上跑一直报错，所以尝试把vue/cli的版本从5.x.x降为4.x.x之后成功serve
• 于是我恍然大悟，电脑新系统安装vue/cli时我并没有指定版本，安装的5.x.x版本，找到的对于loader的配置不兼容，所以我全局卸载了vue/cli

第二个坑

• 全局卸载vue/cli时，用yarn卸报错：他说我当前没有node_modules文件夹，找不到vue/cli，用npm卸载，卸载完后vue -V 它依然坚挺的躺在那里
• 于是又开始查资料，找到需要运行npm config ls -l命令，找到.npmrc文件位置后删掉
• 删vue原始文件：运行where vue命令，找到vue文件删掉
• 全局安装你需要的vue/cli，然后vue -V查看版本解决
• 随后重启项目

总结

1. 引入svg-sprite-loader后serve报错，检查自己的vue/cli版本是否为4.x.x如果不是请全局卸载vue/cli后重新安装4.x.x版本
2. 如果卸载vue/cli出现卸载不掉的问题请看第二个坑
3. 如果是ts报错请在shims-vue.d.ts 添加如下代码

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