最近在做個(gè) vue 的項(xiàng)目，從各種 github 上的開源庫上借鑒開發(fā)方法。
之前讀過 PanJiaChen 的項(xiàng)目 vue-admin-template，發(fā)現(xiàn)項(xiàng)目里對(duì) svg 的使用很巧妙，只要在 src/icons/svg文件夾下放入一個(gè) svg 并引用組件SvgIcon就能使用 svg 圖標(biāo)。
于是我也想在我的項(xiàng)目中這么操作，但是不同之處是我的項(xiàng)目是基于 vue-cli 3 的，而作者的項(xiàng)目是自己配置的 webpack，所以我要在 vue-cli 3 的基礎(chǔ)上進(jìn)行改造。費(fèi)了點(diǎn)時(shí)間，所以還是把這次改動(dòng)寫下來。

翻看作者的 webpack 配置，可以看到關(guān)于 svg 文件處理的配置是這樣寫的：

{
  test: /\.svg$/,
  loader: 'svg-sprite-loader',
  include: [resolve('src/icons')],
  options: {
    symbolId: 'icon-[name]'
  }
}, {
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  exclude: [resolve('src/icons')],
  options: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},

作者使用了一個(gè)插件 svg-sprite-loader對(duì) svg 文件做處理，并指定了只對(duì)src/icons下的 svg 做處理。在第二個(gè)對(duì)象中，svg 還用了 url-loader做處理，但不對(duì)src/icons下的 svg 做處理。（這里如果不想對(duì) svg 使用 url-loader的話其實(shí)可以在正則里不加 svg，不知道為什么作者還要做個(gè) svg 的正則判斷）。

而在 vue-cli3 中，對(duì) svg 的處理是：

webpackConfig.module
      .rule('svg')
        .test(/\.(svg)(\?.*)?$/)
        .use('file-loader')
          .loader('file-loader')
          .options({
            name: genAssetSubPath('img')
          })

vue-cli 3 基于 webpack-chain ，使用了 file-loader，并且把路徑指定為在img文件夾下，但我們的 svg 并不在 img 文件夾，而且svg-sprite-loader已經(jīng)自帶了file-loader的功能，所以，我們可以在我們自定義的vue.config.js文件下將rule(svg)清除：

module.exports = {
  chainWebpack: config => {
    config.module.rule('svg').uses.clear()
  }
}

然后加上自定義的 svg rule，最后的配置如下：

const path = require('path');
function resolve(dir) {
  // 路徑可能與你的項(xiàng)目不同
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .uses.clear()
    config.module
      .rule('svg1')
      .test(/\.svg$/)
      .use('svg-sprite')
        .loader('svg-sprite-loader')
        .options({
          symbolId: 'icon-[name]'
        })
        .end()
      .include
        .add(resolve('src/icons'))
        .end()
  }
}