JavaScript中 Vite 怎么配置多语言打包输出目录-js教程-PHP中文网

vite 本身不内置多语言打包能力，也不支持为不同语言生成独立输出目录；所谓多语言打包实为项目结合 i18n 方案后通过构建脚本或配置实现的多版本静态站点部署。

javascript中 vite 怎么配置多语言打包输出目录

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 和构建脚本控制路径：

在项目中建立语言对应 HTML 文件：src/zh/index.html、src/en/index.html、src/ja/index.html
每个 HTML 引入对应语言的初始化逻辑（如设置 locale = 'zh'）和共享的 JS/CSS
在 vite.config.js 中配置多入口：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

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> // 指定当前语言入口
}
}
}
})
</p>

然后通过不同命令触发构建：

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 分区域缓存场景下使用。