Vite中图片是否转Base64由build.assetsInlineLimit控制，仅在生产构建生效，开发环境不转换；默认阈值4096字节，设为0可禁用内联，动态路径需禁用或改用new URL声明依赖。
在 Vite 中，图片等静态资源是否转为 Base64（即“内联”），由 build.assetsInlineLimit 控制，但关键点在于：这个配置只在生产构建（vite build）中生效，开发服务器（vite dev）完全不走这条路——它用的是内存中间件直接服务文件，不会做任何 base64 转换。
如何设置内联阈值
默认值是 4096 字节（4KB）。小于等于该大小的图片、字体等资源，在构建时会自动转成 data URL 内联进 JS/CSS 中。
- 在
vite.config.ts或vite.config.js中配置：
export default defineConfig({
build: {
assetsInlineLimit: 8 * 1024, // 改为 8KB
}
});
- 设为 0 表示彻底禁用内联，所有资源都输出为独立文件（适合动态拼接路径、
require()或new URL(..., import.meta.url)场景）； - 设为 false 无效，必须是数字；
- 若项目启用了
build.lib模式，此配置会被忽略，所有资源强制内联。
哪些资源会被自动处理
Vite 默认识别并处理以下扩展名的静态资源：.png、.jpg、.jpeg、.gif、.svg、.webp、.avif、.ttf、.woff、.woff2 等。
- 只要通过合法模块导入方式引用（如
import url from './logo.png'或 Vue SFC 中的<img src="./logo.png" alt="JS 中 Vite 静态资源处理（如图片转 Base64 或资源内联）怎么配置" >），就会被纳入处理流程； - 放在
public/目录下的资源不经过构建，也不会被 base64，始终以原始路径暴露； - CSS 中的
url()、Vue 模板中的src、JS 中的import均支持。
动态路径场景必须禁用内联
如果你用字符串拼接方式加载图片（例如 src=`./imgs/${name}.png`），Vite 无法在构建期分析路径，也就无法提前导入和内联。此时：
- 内联后的 base64 不会出现在运行时，会导致 404；
- 正确做法是配合
new URL(..., import.meta.url)显式声明依赖：
const img = new URL('./logo.png', import.meta.url);
document.getElementById('img').src = img.href;
- 或者直接设
assetsInlineLimit: 0，确保所有图都输出为文件，再用相对或绝对路径访问。
开发环境没有 base64，别被误导
很多开发者发现 vite dev 时图片仍是 HTTP 请求，就以为配置没生效——其实这是设计使然。开发阶段不内联是为了保障 HMR 快速更新，且避免大图 base64 拖慢热更新速度。所以：
- 检查内联效果，请始终运行
vite build后查看dist/中的 JS 文件内容； - 不要在开发时通过 Network 面板找 data URL 来验证配置；
- 若需开发时也看到 base64 效果，只能手动写
data:image/...;base64,...或引入第三方插件（非官方推荐）。
