如何使用Vite和React生成多语言本地化打包文件？

你的核心问题是每次执行不同语言的构建命令时，生成的文件会被覆盖，因为输出文件名没有包含语言标识。以下是优化后的实现方案，确保生成dist/index-en.js、dist/index-de.js、dist/index-fr.js三个独立文件：

1. 优化环境变量传递方式 #

放弃直接解析process.argv，改用Vite官方支持的环境变量机制，更稳定可靠。

修改package.json的构建命令 #

"scripts": {
  "dev": "vite",
  "build:en": "VITE_LANG=en vite build",
  "build:de": "VITE_LANG=de vite build",
  "build:fr": "VITE_LANG=fr vite build",
  "build": "npm run build:en && npm run build:de && npm run build:fr",
  "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview"
}

2. 动态配置Vite输出文件名 #

修改vite.config.js，根据环境变量中的语言标识动态设置打包输出文件名，避免文件覆盖：

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import localize from './vite-plugin-react-localize';

export default defineConfig(({ mode }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd(), 'VITE_');
  const lang = env.VITE_LANG || 'en';

  return {
    plugins: [react(), localize()],
    build: {
      target: "es2015",
      rollupOptions: {
        output: {
          // 为输出文件名添加语言后缀
          entryFileNames: `[name]-${lang}.js`,
          chunkFileNames: `[name]-${lang}.js`,
          assetFileNames: `[name]-${lang}.[ext]`,
        },
      },
      // 可选：如果希望每个语言文件放在单独目录，取消下面注释
      // outDir: `dist/${lang}`,
    },
  };
});

3. 改进自定义本地化插件 #

让插件从环境变量中读取语言，确保配置解析完成后再获取语言值：

import { loadEnv } from 'vite';

const localizedStrings = {
  en: { __YES__: "Yes", __NO__: "No", __CANCEL__: "Cancel" },
  de: { __YES__: "Ja", __NO__: "Nein", __CANCEL__: "Abbrechen" },
  fr: { __YES__: "Oui", __NO__: "Non", __CANCEL__: "Annuler" },
};

export default function localize() {
  return {
    name: "localize-plugin",
    configResolved(config) {
      // 配置解析完成后加载环境变量
      const env = loadEnv(config.mode, process.cwd(), 'VITE_');
      this.lang = env.VITE_LANG || 'en';
    },
    transform(code) {
      return code.replaceAll(/__[A-Z]+__/g, match => {
        return localizedStrings[this.lang][match] || match;
      });
    },
  };
}

关键优化点说明 #

• 环境变量机制：使用Vite官方的loadEnv方法读取环境变量，避免手动解析命令行参数的潜在错误。
• 动态输出命名：通过${lang}为输出文件添加语言后缀，确保每个语言的打包文件独立不覆盖。
• 插件生命周期：在configResolved阶段获取语言值，确保Vite配置已经完全解析，语言标识准确。

额外优化建议 #

• 分离本地化资源：将多语言字符串从插件中抽离到单独的JSON文件（如locales/en.json），便于维护和扩展。
• 多语言开发模式：添加开发环境的语言切换命令，如"dev:de": "VITE_LANG=de vite"，方便开发时预览不同语言效果。
• HTML文件适配：如果需要生成对应语言的HTML文件，可以使用Vite的HTML插件动态替换脚本引用路径。

内容的提问来源于stack exchange，提问作者Alexander Farber