今天在vue中配置处理svg文件时遇到图标显示不出来，查看开发者工具也没有提示异常和错误。不过查看Element元素的时候可以看到svg标签中出现了#shadow-root (closed)，shadow-dom 是浏览器提供的功能，它允许在浏览器渲染文档（document）的时候向Dom结构中插入子DOM元素，但是这个子DOM元素（shadow-dom）并不在主DOM 树中，所以该子DOM元素无法再被操控。如果一个shadow root的mode被设置为closed那么它的值将会是 null，也就是子元素挂载失败。

安装svg-sprite-loader插件

翻了下之前写的文章【Vue实战034：使用SVG图标详解】，根据之前的步骤重新检查配置的步骤，并没有发现啥配置有问题。安装svg-sprite-loader插件，执行命令：npm install svg-sprite-loader --save即可将svg-sprite-loader插件安装到项目中（当前版本已经更新到5.0了）。

定义SvgIcon组件

还是在components目录中来创建一个SvgIcon.vue文件，为了方便我把之前的代码直接抓过来了。原来是通过use在SVG文档内取得目标节点,并在别的地方复制它们然后将其粘贴到use元素的位置，通过xlink:href属性定义读取和显示被链接的资源。

自动导入文件

在存放svg图标文件夹下新增目录svg文件夹和index.js文件，svg用来专门存放svg图标文件，index.js文件用来处理svg图标文件，实现自动识别并导入项目。

全局注册组件

要想SvgIcon组件能在全局使用，我们就需要在main.js中进行全局注册。全局注册之后我们就可以在项目的任何地方直接使用该组件了，在main.js中引入引入Icon图标：import './assets/icons/index'。

更新webpack配置

Vue3.0之后隐藏了webpack配置文件，如果我们需要重新配置webpack就需要在跟目录下新建一个vue.config.js文件。这是Vue cli3一个缺省文件，创建之后会被项目自动加载（我的vue.config.js文件去哪了，刚不是创建了么？？？）。

回到vscode打开记录发现vue.config.js文件建错地方了，放src目录下去了...（这哪还能识别的到？草率了...）。直接将文件移到根目录下来重新启动项目加载vue.config.js文件，哎这就就当重新温习了一下吧。

总结：

有段时间没写前端了，竟然闹了个乌龙...（就当温习了吧）。以上内容是小编给大家分享的【Vue实战080：SVG图标不显示异常记录】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：

下面是初稿效果图，还没有完成逻辑判断和后台数据接入。不过整体的前端效果还是出来了，这个风格还是挺高大上的。