i18n 高效实现方案：前端国际化神器安利一波

在前端开发中，国际化（i18n）早已是标配功能，但面对数百条文案、数份语言包、无休止的多人协作，手工维护 JSON 文件依然让人头大。

传统做法通常包括：

• 手动查找中文文案
• 手动补齐语言包
• 手动翻译
• 手动替换 t('xxx')
• 手动校验是否遗漏

以上流程不仅耗时，还极易出现遗漏、冲突、重复翻译等问题。

幸运的是，新一代自动化 i18n 工具已经让国际化进入“零体力劳动时代”。今天就带你全面了解 三款实测高效、支持 Vue/React 的 i18n 自动化解决方案，并给出实际项目的场景选型指南。

🎯 一、i18n-auto-extractor：轻侵入式，一键抽取 + 自动翻译

如果你愿意在源码中包一层 $at()，那这款工具绝对值得长期使用。

⭐ 特点

• 轻量侵入：源码中文包一层 $at('欢迎使用')
• 跨框架通吃：Vue2、Vue3、React、原生 JS、TS 都能用
• 零配置开箱即用
• 构建时自动抽取中文
• 自动生成语言包（内置谷歌翻译）
• 支持 100+ 语言，包体小，运行时语言切换顺滑

🛠️ 使用步骤（3 步走）

npm i -D i18n-auto-extractor
npx i18n-auto-extractor   # 自动生成配置文件

npm i -D i18n-auto-extractor
npx i18n-auto-extractor   # 自动生成配置文件

代码中直接包一层：

const title = $at('欢迎来到我的网站')

const title = $at('欢迎来到我的网站')

构建后自动生成：

locales/
├─ zh.json
├─ en.json
├─ fr.json

适合 新项目长期使用，可维护性极强。

🎯 二、auto-i18n-translation-plugins：真正的零侵入方案，老项目秒级国际化

如果你不想在源码写 $t() 或 $at()，那么这款工具完全没有任何侵入。
它能自动扫描源码中的中文，并自动替换为 key。

⭐ 特点

• 完全零侵入：无需写 $t() 或 $at()
• Vite / Webpack / Rollup 全覆盖
• 支持百度 / 谷歌 / 有道翻译源
• 自动增量翻译：只翻译新增中文
• 老项目迁移成本极低

🛠️ Vite 示例

npm i -D vite-auto-i18n-plugin@^1.0.23

npm i -D vite-auto-i18n-plugin@^1.0.23

// vite.config.ts
import viteAutoI18n from 'vite-auto-i18n-plugin'

export default defineConfig({
  plugins: [
    vue(),
    viteAutoI18n({
      targetLangList: ['en', 'ja', 'ko'],
      translator: new YoudaoTranslator({ appId: 'xxx', appKey: 'xxx' })
    })
  ]
})

// vite.config.ts
import viteAutoI18n from 'vite-auto-i18n-plugin'

export default defineConfig({
  plugins: [
    vue(),
    viteAutoI18n({
      targetLangList: ['en', 'ja', 'ko'],
      translator: new YoudaoTranslator({ appId: 'xxx', appKey: 'xxx' })
    })
  ]
})

构建后会自动生成：

lang/index.json

适合 老项目 1〜2 天上线多语言版本。

🎯 三、i18n-cli：命令行一把梭，最适合多人协作 + 翻译团队

CLI 工具的优势在于：适合大型项目 + 翻译团队合作。
尤其是内置 Excel 进出能力，对产品/运营团队非常友好。

⭐ 特点

• 扫描 + 生成 key + 翻译，全流程自动化
• Excel 导入导出（翻译团队最爱）
• 增量模式避免重复翻译
• 多翻译源支持（百度/谷歌/有道）

🛠️ 使用（2 步走）

npm i -g @ifreeovo/i18n-extract-cli
it --locales en,ja   # 全量扫描并翻译
it --incremental     # 仅处理新增文案

npm i -g @ifreeovo/i18n-extract-cli
it --locales en,ja   # 全量扫描并翻译
it --incremental     # 仅处理新增文案

产物：

// locales/zh-CN.json
{ "a1b2c3": "提交订单" }

// locales/en.json
{ "a1b2c3": "Submit Order" }

适合 需要产品 + 翻译团队协作的中大型项目。

🎯 四、场景选型指南

🏁 五、总结

国际化不应该再是体力活。总结三款工具的优势如下：

• 不想写 $t() → 用 auto-i18n-translation-plugins
• 愿意包一层 $at() 获得更强控制力 → 用 i18n-auto-extractor
• 团队协作 + Excel → 用 i18n-cli

三款工具均为 MIT 开源，适用于 Vue2/3、React，并能覆盖新项目、老项目、协作流程等所有场景。

国际化不再繁琐，真正做到：
“写完代码就出国”。

🔗 开源地址

• i18n-auto-extractor
  https://github.com/qianyuanjia/i18n-auto-extractor
• auto-i18n-translation-plugins
  https://github.com/auto-i18n/auto-i18n-translation-plugins
• i18n-cli
  https://github.com/IFreeOvO/i18n-cli