配置环境

在config.js文件中加载以下内容，让我们指定的文件走什么形式（类似于loader）

const path  = require('path')

module.exports = {
    lintOnSave: false,
    chainWebpack: config => {
        const dir = path.resolve(__dirname, 'src/assets/icons')

        config.module
            .rule('svg-sprite')
            .test(/\.svg$/)
            .include.add(dir).end()
            .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract: false}).end()
        config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite : true}])
        config.module.rule('svg').exclude.add(dir)
    }
}

在shims-vue-d-ts文件中加入（单个文件）

//分析svg图片，import引用

declare module "*.svg" {
  const content: string;
  export default content;
}  

多个svg文件一次引入

声明一个importAll的变量

  let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
  try {
    importAll((require.context("../assets/icons", true, /\.svg$/)));
  } catch (error) {
    console.log(error);
  

删除svg文件中的fill属性

在我们使用Vue中active-class切换变色的时候，有些引入的svg图片的颜色并不会变化，主要是因为svg文件默认是XML文件中有一个Fill属性导致

安装svgo-loader

//使用yarn
yarn add svgo-loader --dev
//使用npm
npm install svgo-loader --dev

在文件config.js中运行命令use

.use('svgo-loader').loader('svgo-loader').tap(options =>({...options,plugins:[{removeAttrs:{attrs:'fill'}}]})).end()