526互联

vuecli 自动转换小文件为 base64 格式，如何关闭？

发布时间 2023-11-21 19:59:23作者: 镜暮

1. 问题

最近在写 vue 项目时，发现稍微小一点的静态资源，例如字体文件， 图片都被自动转换为 base64 格式了。

在网上搜索时基本都是去配置 url-loader ，配置后提示：Can't resolve 'url-loader'。看了依赖文件中并没有 url-loader 这个库。

2.原因

目前最新的 vue-cli 版本是基于 webpack5 的，在 webpack4 的时候是用 url-loader 等 loader 来处理静态资源，5 则是用 asset 模块（asset module）来处理的，

3.解决办法

如果不需要自动转换为 base64 格式，可以使用以下配置，调整转换生效的最大文件大小，这里设置的是 4kb（默认应该是 8kb）

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
      },
    ],
  },
};

详情可以看 webpack5 文档里的解释：https://webpack.docschina.org/guides/asset-modules/#general-asset-type