前言：

       vue中和我们传统的页面是不同的，svg不可以直接使用，我们这里说说2.0,3.0脚手架搭建的项目中优雅的使用svg的办法；

vue-clli2.0搭建的项目：

第一：安装依赖

npm install svg-sprite-loader --save-dev

第二：配置build文件夹中的webpack.base.conf.js

     {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/icons')],//1、添加这句
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {//2、把地下这个对象添加进去
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },

第三：在src/components下新建文件夹及文件SvgIcon/index.vue

    这是位置图，index.vue代码：

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
  export default {
    name: 'SvgIcon',
    props: {
      iconClass: {
        type: String,
        required: true
      },
      className: {//按需加入，传过来可以给他定义属于自己的class名字
        type: String,
        default: ''
      }
    },
    computed: {
      iconName() {
        return `#icon-${this.iconClass}`
      },
      svgClass() {
        if (this.className) {
          return 'svg-icon ' + this.className
        } else {
          return 'svg-icon'
        }
      }
    },
    mounted(){},
    methods:{},
  }
</script>

<style scoped>
  .svg-icon {
    /* width: 1em;//svg的大小，根据需要改变
    height: 1em; */
    width: 100%;
    height: 100%;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: auto;
  }
</style>

第四：在src下新建icons文件夹，及icons文件夹下svg文件夹、index.js文件， index.js文件内容如下

index.js:

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件

// register globally
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

第五：在main.js中引入svg

import './icons'

第六：在svg文件夹中放张svg图，并在页面中调用，

<svg-icon icon-class='taiqu' :className='nameYW'></svg-icon>
//icon-class是你svg文件夹下,svg图的名字,className是你给他起的唯一性名字(我这里是用来加样式)

vue-clli3.0搭建的项目：

第一：安装svg-sprite-loader和file-loader,配置vue.config.js

本来只添加svg-sprite-loader就行了，但是svg也是图片的一种，所以file-loader也会对其进行处理，所以就会冲突，解决的办法就是，在项目中新建一个文件icons，使用file-loader编译svg的时候不编译icons里面的图标

const path = require('path')
module.exports = {
  // 关闭内置Eslint检查
  lintOnSave: false,
  // 打包输出路径
  publicPath: process.env.NODE_ENV === 'production' ? '/test/guohua/' : '/',    //2019.9.16 zwh测试打包以后资源路径问题注释
  // publicPath: './', //2019.9.16 zwh测试打包以后资源路径问题添加
  productionSourceMap: false,//不要打包以后的map文件-zwh
  devServer: {
    open: true, // 启动服务后是否打开浏览器
    host: '0.0.0.0',
    port: 8080, // 服务端口
    https: false,
    hotOnly: false,
    proxy: null, // 设置代理
    before: app => {}
  },

    /**这里之后，还有第一行的path是跟svg有关系的配置**/
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()
    svgRule
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, './src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
    const fileRule = config.module.rule('file')
    fileRule.uses.clear()
    fileRule
      .test(/\.svg$/)
      .exclude.add(path.resolve(__dirname, './src/icons'))
      .end()
      .use('file-loader')
      .loader('file-loader')
  }
}

第二：根目录创建icons文件夹，来放所有的svg文件，跟2.0一样，这几步

第三：src / components / IconSvg.vue ,跟2.0一样，这几步

IconSvg.vue:

<template>
  <svg class="svg-icon" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style>
  .svg-icon {
    /**width: 1em;
    height: 1em;**///根据自己需要来
    width: 100%;
    height: 100%;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

第四：在main.js中引入并注册

//引入svg组件
import IconSvg from './components/IconSvg'
// //全局注册icon-svg
Vue.component('icon-svg', IconSvg)

第五：页面中引入svg，并使用（因为这个是按需引入，并不是2.0的全部引入）

 <p><icon-svg icon-class="zbzl_1" /></p>   //icon-class是icons里面的svg名字

 import '@/icons/PartyGroup/zbzl_1.svg'    //引入是icons里面的svg

到这里，2.0,3.0脚手架搭建的项目中使用svg的方法就结束了，我自己目前使用的就是这样的方法,下面是参考文档地址：

  3.0vue-cli+svg:     https://www.jianshu.com/p/1150876dfa04

  2.0vue-cli+svg:     https://www.cnblogs.com/shenyf/p/10370949.html