有关svg组件封装的三个疑问

Question

老师您好:
问题一:
在vue.config,js文件中, 这个config.module.rule('xxx')中的xxx是怎么知道值是什么的呢?
问题二:
既然ebpack对.svg结尾的文件没有默认的loader, 那我为什么要忽略呢?直接配置这个svg-sprite-loader不就好了吗?
问题三:
据我了解: 这个在index.vue文件中的#icon是和vue.config.js中.options中的symbolId相关, symbol的id如果不特别指定，就是我的文件名。随后我做出这样的操作: 删除.options中的symbolId配置同时修改index.vue文件中iconName的函数, 目的是想试试不要前缀直接能不能用,但是图标就看不到了
老师在视频中对这里的解释是: 像element-ui也会添加一个el作为前缀.
那我为什么不设置前缀就不生效呢? 我也没看懂svg-sprite-loader的npm官网在说什么.
期待老师的解答, 谢谢老师!!!

Answer 1

Sunday 2022-03-23 22:25:49

你好

问题一: config.module.rule 对应的是 webpack 的 rule 规则，这个rule 规则其实是对应的 loader ，这个如果不知道是哪个loader 的话，可以看一下 webpack 的 loader 列表的。

问题二：可能我之前的回答造成了一些歧义。

这个表示 svg 的处理忽略掉 icons 文件夹下的内容。

这个代码只是表示通过 svg-sprite-loader 处理 svg。

问题三：symbolId 其实意思表示一个《唯一的id，因为 symbol 是不重复的》，没有想象的那么复杂。

你这段话的意思是说你把 symbolId 删除了？

那你删除之后你的使用应该是这样才对呀，就没有必要添加 icon-  了

• 提问者 knockkey #1

  老师, 我还想追问一下:
  既然svg的处理要忽略掉icons文件夹下的内容, 那就是如果不使用svg-sprite-loader 处理 svg, 是会有默认loader处理的. 是这个意思吗?