vue-cli2.0,vue-cli3.0中使用svg

前言：

       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代码：

第四：在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图，并在页面中调用，

//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:

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

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

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

 
   //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