vue中使用svg注意点 vue中使用svg注意点

【vue中使用svg注意点】网上介绍在vue中如何使用svg的教程已经很多了，我这不多做赘述。
场景
已经根据网上的教程，将svg组件引入到页面中去了，但是F12发现，svg文件并没有并真正引入进去，中间是空的。
这个问题困扰了我好几天，一直找不到原因。
解决

对于用来svg组件的icon文件夹，url-loader设置不对其进行转换，注意exclude将这个文件夹排除在外。
使用svg-sprite-loader对该icons文件夹进行处理。

{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', exclude: [resolve('src/icons')],// 注意把使用svg组件的文件去除掉 options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/icons')],// 指定转换路径 options: { symbolId: 'icon-[name]' } }