前端報錯： 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