vue cli3.x cli4.x配置vue.config.js 使支持SVG打包。

項目使用的WEB font技術，有幾個圖標是SVG，圖標都是在1KB以內。如果不使用webpack打包，單獨發布上去，客戶請求時會多很多HTTP連接。而瀏覽器單次請求只能10個連接，這樣會多幾次會話，影響瀏覽效果。

1、命令行使用 vue inspect > output.js查看到當前的配置

/* config.module.rule('images') */
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        use: [
          /* config.module.rule('images').use('url-loader') */
          {

2、以為只要在test正則中加上|svg就可以了，配置如下：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, { limit: 10240 }));
  }
}

3、結果翻車了。SVG還是生成在dist目錄中。再繼續查看output.js

發現本來配了svg的loader,

/* config.module.rule('svg') */
      {
        test: /\.(svg)(\?.*)?$/,
        use: [
          /* config.module.rule('svg').use('file-loader') */
          {

 

4、找到問題就好辦了，先把原svg的配置清除，再使用images的rule，配置如下：

chainWebpack: config => {
    const svgRule = config.module.rule('svg');
    // 清除已有的所有 loader。
    // 如果你不這樣做，接下來的 loader 會附加在該規則現有的 loader 之后。
    svgRule.uses.clear();
    // 添加要替換的 loader
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, { limit: 10240 }));
  }

上面的配置的意思是讓10KB以下的圖片及svg圖片以base64的方式嵌入頁面中。至此，大功告成。

 

提示：如果是圖標，請不要在每個地方用image標簽引入圖片，而是應該在css文件中使用background-image的方式引入。不然頁面上會重復引用同一段base64代碼，徒增傳輸數據。切記。