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代码，徒增传输数据。切记。