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

添加下面的配置

  chainWebpack: (config) => {// 配置图片的 loaderconfig.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})}

摘抄自webpack文档

言下之意, 以前的三个 loader 在webpack5.x 版本已经不用了, 取而代之的是 4 种模块类型

webpack 文档