前端报错： error in ./src/assets/fonts/iconfont.svg?t=1523541245904，Module parse failed: Unexpected token (1:0)，vue.config.js中引入chainWebpack后报错

报错如下：

由于我在登录页面中，虽然icon图标提供了一系列的图标，但是你找完后发现并没有那个图像和小锁，此时可以通过第三方的图标库来实现。第三方图标库采用阿里图标库，iconfont.css中就有我们需要用到的图标。

1、 将素材中的fonts目录放到assets目录下，

2、 在main.js入口文件中导入iconfont.css

import './assets/fonts/iconfont.css'

3、 打开Login.vue，为el-put添加图标，注意图标前的点不要复制。iconfont为基础类，icon-xxx为具体哪个图标

<!-- 登录表单区 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
        <el-form-item prop="username">
          <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="iconfont icon-3702mima" v-model="loginForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>

但是，当我在项目中使用了svg之后，参考：https://www.cnblogs.com/zwh0910/p/15239530.html

由于在vue.config.js中引入了如下内容就报错：error  in ./src/assets/fonts/iconfont.svg?t=1523541245904，Module parse failed: Unexpected token (1:0)

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(resolve('src/icons')) //处理svg目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
}

经过百度，终于找到解决办法，修改chainWebpack的内容如下：

chainWebpack: config => {
        // config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
        // 找到svg 默认的处理规则，将某个目录排除处理里的范围
        config.module.rule('svg').exclude.add(resolve('src/icons')).end();
        // 新加一个icons的处理规则,用svg-sprite-loader处理，将上面那个目录添加到这个规则的处理范围内
        config.module
            .rule('svg-sprite-loader')  // 新添加的处理规则
            .test(/\.svg$/)
            .include                   // 添加
            .add(resolve('src/icons')) //处理svg目录
            .end()
            .use('svg-sprite-loader') // 使用svg-sprite-loader处理
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
    },

大意是：对于默认的处理规则svg，要排除掉新的处理规则的目录。对于新添加的一个处理规则svg-sprite-loader，将默认处理规则svg中排除的目录添加进来。

注意：svg文件的位置为src/icons