vite 中 build.assetsinlinelimit 用于控制静态资源内联为 base64 的字节阈值，默认 4096（4kb），可配置为 8192 等值以支持更大图片内联，但需注意其影响所有 asset 类型且在 build.lib 模式下被忽略。
在 Vite 中，build.assetsInlineLimit 就是用来控制“多大的图片会转成 Base64”的临界值，单位是字节（不是 KB），默认是 4096（即 4KB）。想让更大的图片也内联为 Base64，直接改这个值就行。
怎么配置 assetsInlineLimit
在 vite.config.ts 或 vite.config.js 的 build 选项里设置：
- 设为
8192→ 所有 ≤ 8KB 的图片自动转 Base64 - 设为
0→ 所有图片都强制内联（不推荐，容易 bloated） - 设为
10240→ 支持 ≤ 10KB（比如高清小图标、带透明通道的 logo）
示例（vite.config.ts）：
export default defineConfig({
build: {
assetsInlineLimit: 8 * 1024 // 8KB
}
})
注意它影响的不只是图片
assetsInlineLimit 是全局静态资源阈值，不仅管 .png、.jpg，还会影响：
-
.svg（尤其 inline SVG 在 CSS 中用mask-image时要注意 base64 编码是否含空格/换行） -
.woff、.woff2字体文件 -
.webp、.gif等所有被 Vite 当作 asset 处理的静态资源
所以调高它前，建议先用 vite build --report 看打包分析，确认增大后不会让 JS/CSS 体积明显膨胀。
想只对某张图强制 Base64？不用改全局阈值
更灵活的方式是绕过阈值，直接生成 DataURL：
- 在代码中写：
const url = new URL('./logo.svg', import.meta.url).href - 返回的就是完整的
data:image/svg+xml;base64,...字符串 - 适用于关键小图（如 loading 图标、首屏 icon），不受
assetsInlineLimit限制
常见误区提醒
以下情况会导致配置“看似没生效”：
- 用了
build.lib模式 →assetsInlineLimit会被忽略，所有资源默认内联 - Nuxt 3 等上层框架封装了 Vite 配置 → 要确认是否透传了
build.assetsInlineLimit - 图片路径写法错误（如用了绝对 public 路径
/img/icon.png）→ Vite 不会处理，自然不转 Base64
