vuecli5.x 配置图片输出为base64

是阿臻

已于 2023-08-04 11:15:53 修改

阅读量2k

点赞数 2

分类专栏：前端问题杂记文章标签：前端

于 2023-07-18 11:45:00 首次发布

本文链接：https://blog.csdn.net/weixin_43191327/article/details/131783813

版权

前端问题杂记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

解释：webpack的默认配置是小于一定的文件大小就要将图片转为base64, 所以尽量将这个阈值调大你的图片就可以转为base64; 当然这种做法不好, 会导致代码文件变大, 不过为了满足需求也没得办法。这年头大家都用 vite 了, 网上没有 vuecli5.x 这方面的记录, 写篇文章记下, 给其他人留盏明灯

先说为什么, 以前的三个 loader 在webpack5.x 版本已经不用了, 取而代之的是 4 种模块类型

添加下面的配置

  chainWebpack: (config) => {
    // 配置图片的 loader
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .set('parser', {
        dataUrlCondition: {
          maxSize: 400 * 1024, // 4kb
        },
      })
  },

为什么不是下面的配置

 chainWebpack: config => {
        config.module
            .rule('images')
            .test(/.(jpg|png|gif)$/)
            .tap(options => Object.assign(options, { limit: 1024 * 1024 })); // 1M
        })
    }