通过配置 build.assetsInlineLimit 为极大值，可让 Vite 5+ 将 SVG 等静态资源自动转为 Base64 内联到 JavaScript 中，避免生成 assets 目录，最终输出单一 JS 文件。
通过配置 `build.assetsinlinelimit` 为极大值，可让 vite 5+ 将 svg 等静态资源自动转为 base64 内联到 javascript 中，避免生成 assets 目录，最终输出单一 js 文件。
在使用 Vite（尤其是搭配 Vue）进行生产构建时，默认情况下 SVG、PNG、GIF 等静态资源会被单独提取并输出至 dist/assets/ 目录，导致产物分散、需额外 HTTP 请求加载。而部分场景（如嵌入式环境、微前端子应用、或严格要求单文件交付）需要将所有资源（特别是 SVG）直接内联进最终的 JavaScript 包中，实现「零外部依赖」的单一 JS 输出。
Vite 自 v5.0 起正式支持 SVG 文件的内联处理（PR #14643），配合通用的 assetsInlineLimit 机制，即可统一控制各类静态资源的内联行为。
✅ 正确配置方式（Vite 5+）
在 vite.config.js 中将 build.assetsInlineLimit 设为足够大的数值（例如 Number.MAX_SAFE_INTEGER），确保所有 SVG、GIF、字体等资产均被强制内联：
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
build: {
// ⚠️ 关键配置：使所有资产（含 SVG）以内联 Base64 形式注入 JS
assetsInlineLimit: Number.MAX_SAFE_INTEGER,
// 可选：禁用 CSS 中的 asset 引用分离（如 background: url(...)）
rollupOptions: {
output: {
// 确保 chunk 和 asset 不再生成独立文件
inlineDynamicImports: true,
}
}
}
})
? 注意：
assetsInlineLimit单位为字节（bytes）。设为Number.MAX_SAFE_INTEGER（≈9×10¹⁵）可覆盖任意大小文件，实际项目中也可按需设为10 * 1024 * 1024（10MB）以平衡包体积与内联收益。
? 补充说明与注意事项
GIF 默认已内联？
是的 —— Vite 对 GIF 的内联阈值默认较低（约 4KB），因此小 GIF 常被自动内联；但 SVG 在 v5 前默认不参与内联流程，v5+ 才将其纳入统一资产处理管道。内联后如何使用 SVG？
仍可像往常一样import Icon from './icon.svg'，Vite 会自动将其解析为字符串（Base64 URL）或URL.createObjectURL()兼容对象（取决于assetInlineLimit是否触发）。若需原始 SVG 字符串（如用于），建议搭配vite-plugin-svg插件进行字符串化导入。构建产物验证
执行npm run build后检查dist/目录：应仅存在index.html和assets/xxx.js（无独立.svg文件）；打开 JS 文件搜索data:image/svg+xml;base64,即可确认 SVG 已成功内联。性能权衡提醒
过度内联大 SVG 或多图资源会显著增大 JS 包体积，影响首屏解析与缓存效率。建议仅对图标类小尺寸 SVG（rollupOptions.output.manualChunks 对大型资源做策略性拆分。
通过该配置，你无需手动复制粘贴 SVG 代码，也无需引入额外构建插件，即可在标准 Vite 流程中实现真正「零 assets 目录」的纯净单文件交付。
