vue-cli3使用svg问题的简单解决办法

此解决办法使用的是 vue-cli 插件 vue-cli-plugin-svg-sprite效果如下：那个朋友圈图标就是我从网上找的svg图片使用方式如下：vue add svg-spritevue.config.js添加配置，在文件内最下方找到pluginOptionsmodule.exports = { pluginOptions: { svgSprite: { /* * The directory containing your SVG files. / dir: ‘src/assets/icons’, / * The reqex that will be used for the Webpack rule. / test: /.(svg)(?.)?$/, /* * @see https://github.com/kisenka/svg-sprite-loader#configuration / loaderOptions: { extract: true, spriteFilename: ‘img/icons.[hash:8].svg’ // or ‘img/icons.svg’ if filenameHashing == false }, / * @see https://github.com/kisenka/svg-sprite-loader#configuration */ pluginOptions: { plainSprite: true } } } };再执行：npm install svgo svgo-loader –save-dev然后再在 your vue.config.js file:module.exports = { chainWebpack: config => { config.module .rule(‘svg-sprite’) .use(‘svgo-loader’) .loader(‘svgo-loader’); }};然后再assets下创建icons文件夹，将你的svg图标放入，name就是svg的名字，如下方式使用：<svg-icon name=“aperture”></svg-icon>这个组件是插件帮你生成的就会看到你的svg图标出来了