vue cli 5.x 配置小图片转base64

前言

本文基于 vue-cli 5.0.6 版本

vue-cli 5 版本已经将 webpack 版本升级为5版本，具体变更可以自行查看 vue-cli 迁移日志 从 Vue CLI v4 到 v5

1.vue-cli 4.x 版本，配置如下

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .test(/\.(jpg|png|gif)$/)
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, { limit: 10240 })); // 10KiB
  }
};

2.vue-cli 5.x 版本， 配置如下

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .test(/\.(jpg|png|gif)$/)
      .set('parser', {
        dataUrlCondition: {
          maxSize: 10 * 1024 // 10KiB
        }
      })
  }
};

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。