通过配置 build.assetsInlineLimit 为极大值，可强制 Vite 将 SVG（及 GIF 等）资源以内联 Base64 方式注入 JavaScript，实现单文件输出，无需额外 assets 目录。
通过配置 `build.assetsinlinelimit` 为极大值，可强制 vite 将 svg（及 gif 等）资源以内联 base64 方式注入 javascript，实现单文件输出，无需额外 assets 目录。
在使用 Vite + Vue 构建生产包时，默认情况下 SVG 文件会被单独提取到 assets/ 目录下，并以哈希命名（如 icon.abc123.svg），这会增加 HTTP 请求次数，也不符合“单 JS 文件部署”的轻量需求。幸运的是，Vite 5 起原生支持 SVG 作为可内联资产（此前仅支持字体、图片等），配合 build.assetsInlineLimit 配置即可统一处理。
核心方案是将该阈值设为 Number.MAX_SAFE_INTEGER（即 9007199254740991），使所有引用的 SVG 和 GIF（无论大小）均被转为 Base64 字符串并直接嵌入 JS 模块中：
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
build: {
assetsInlineLimit: Number.MAX_SAFE_INTEGER,
// 可选：禁用 assets 目录生成（更彻底）
rollupOptions: {
output: {
assetFileNames: () => 'assets.js' // 所有静态资源合并进同一文件（非必需）
}
}
}
})⚠️ 注意事项：
- 此方案仅适用于 Vite ≥ 5.0（SVG 内联支持自 PR #14643 引入）；
- GIF 默认已支持内联，但 SVG 在 Vite 5 前会被忽略或报错，升级后行为一致；
- 过大 SVG（如 >1MB）内联可能导致 JS 包体积激增、首屏解析延迟，建议结合
@svgx/vite-plugin或手动优化图标尺寸； - 若使用
<img src="@/assets/icon.svg" alt="如何在 Vite 构建中内联 SVG（避免生成 assets 文件夹）" >或import svgUrl from '@/assets/logo.svg'，均会被自动内联；但 CSS 中的background: url(...)也受此配置影响； - 最终产物中不再出现
assets/子目录，所有资源以data:image/svg+xml;base64,...形式存在于 JS 字符串中。
总结：只需一行关键配置，即可让 Vite 将 SVG 完全内联进 JS，满足无依赖单文件部署场景——简洁、有效、零侵入。
