Vite 本身不内置多语言打包能力，也不支持为不同语言生成独立输出目录；所谓多语言打包实为项目结合 i18n 方案后通过构建脚本或配置实现的多版本静态站点部署。
JavaScript 中 Vite 本身**不内置多语言打包（i18n）能力**，也不支持“为不同语言生成独立输出目录”这类原生配置。所谓“多语言打包输出目录”，实际是项目结合 i18n 方案（如 i18next、vue-i18n 或 @inlang/paraglide-js）后，通过构建脚本或配置实现的**多版本静态站点部署**，而非 Vite 单次 build 自动产出多个语言子目录。
区分两种常见需求场景
场景一：单个构建产物 + 运行时切换语言
这是最常用方式。所有语言资源（JSON/YAML）打包进同一份 dist，前端根据 locale 动态加载对应翻译。此时无需配置多输出目录，Vite 默认输出一个 dist 即可。
场景二：为每种语言生成独立 HTML 和资源路径（如 /zh/, /en/, /ja/）
这属于“多页面 + 多 locale 静态站点”，需手动组织结构并控制构建行为。Vite 不自动完成，但可通过以下方式实现：
按语言分目录输出 HTML 和资源（推荐做法）
核心思路：用 build.rollupOptions.input 指定多个入口 HTML，并配合 base 和构建脚本控制路径：
立即学习“Java免费学习笔记（深入）”；
- 在项目中建立语言对应 HTML 文件：
src/zh/index.html、src/en/index.html、src/ja/index.html - 每个 HTML 引入对应语言的初始化逻辑（如设置
locale = 'zh'）和共享的 JS/CSS - 在
vite.config.js中配置多入口：
<!-- vite.config.js 示例 -->
export default defineConfig(({ mode }) => {
const locale = mode === 'zh' ? 'zh' : mode === 'en' ? 'en' : 'ja'
<p>return {
base: <code>/${locale}/</code>, // 关键：让所有资源路径带语言前缀
build: {
outDir: <code>dist/${locale}</code>, // 输出到对应语言子目录
rollupOptions: {
input: <code>src/${locale}/index.html</code> // 指定当前语言入口
}
}
}
})
然后通过不同命令触发构建：
-
npm run build:zh→ 执行vite build --mode zh -
npm run build:en→ 执行vite build --mode en - 再用脚本合并或部署到 Nginx 的
/zh/、/en/路径下
静态资源按语言隔离存放（可选增强）
如果还需把图片、字体等也按语言分目录（如 dist/zh/img/），可在 assetFileNames 中加入 locale 信息：
- 利用环境变量或模式传入 locale 值
- 在
build.rollupOptions.output.assetFileNames回调中拼接路径：
assetFileNames: ({ name }) => {
const locale = process.env.VITE_LOCALE || 'zh'
if (/\.png|jpe?g|gif$/i.test(name)) {
return `${locale}/img/[name]-[hash].[ext]`
}
if (/\.woff2?$/i.test(name)) {
return `${locale}/fonts/[name]-[hash].[ext]`
}
return `${locale}/assets/[name]-[hash].[ext]`
}
注意：这种方式会显著增加构建复杂度，通常只在强 SEO 或 CDN 分区域缓存场景下使用。
替代方案：用插件自动化多语言构建
可引入社区插件简化流程，例如：
-
vite-plugin-i18n：提供编译时生成多语言 HTML 的能力 -
@inlang/paraglide-js：配合 Vite 插件，支持类型安全 + 构建时生成多 locale 静态页 - 自定义 Rollup 插件：监听
generateBundle钩子，复制并重写 HTML 中的<base>和资源路径
这些插件本质仍是封装了上述多入口 + 多 base 的逻辑，不改变 Vite 底层机制。
