一键 i18n 国际化神库!适配 Vue、React!

作为一名前端开发,给项目做多语言早已是家常便饭。

可每次面对成百上千条文案,"一行行手动翻译 + 维护 N 个 JSON 文件"仍然是让人头秃的体力活。

今天就把我实测有效的 3 款零入侵、一键式国际化神库 分享给大家------Vue2/3、React 都能用,真正做到"写完代码就出国"。

🎯i18n-auto-extractor

$at() 包一层,剩下的交给机器人

  • 安装即可跑,零配置开箱即用
  • VueReact、原生项目全部通吃
  • 内置谷歌翻译,支持 100+ 语言
  • 极小包体,运行时动态切换语言

使用 3 步走

bash 复制代码
npm i -D i18n-auto-extractor
npx i18n-auto-extractor   # 生成配置文件
ts 复制代码
// 代码里包一层即可
const title = $at('欢迎来到我的网站')

构建后会自动生成:

arduino 复制代码
locales/
├─ zh.json   // 原中文
├─ en.json   // 自动翻译
├─ fr.json   // ...

🎯auto-i18n-translation-plugins

$t() 都不用写,源码中文自动翻译

  • 完全零侵入,Babel 扫描无需改代码
  • Vite / Webpack / Rollup 插件形态全覆盖
  • Google有道百度翻译源任意切换
  • 增量构建,只翻译新增文案省流量
bash 复制代码
npm i -D vite-auto-i18n-plugin@^1.0.23

使用示例(Vite)

bash 复制代码
npm i -D vite-auto-i18n-plugin@^1.0.23
ts 复制代码
// 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,直接引入即可使用。

🎯i18n-cli

命令行一把梭,老项目 5 分钟上线多语言

  • CLI 一键扫描并替换中文为 t('xxx')
  • Excel 导入导出,翻译团队协作零门槛
  • 支持百度谷歌有道多翻译源
  • 增量模式仅处理新增文案,避免重复劳动

使用 2 步走

bash 复制代码
npm i -g @ifreeovo/i18n-extract-cli
it --locales en,ja        # 全量翻译
it --incremental          # 仅增量

产物示例:

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

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

🎯 场景速选指南

场景 推荐工具 理由
新项目,想持续维护 i18n-auto-extractor 有侵入,但长期可维护
老项目 2 天上线英文版 auto-i18n-translation-plugins 完全不改动源码
需要产品/翻译团队介入 i18n-cli CLI + Excel 协作最顺畅

🏁 总结

  • 不想写 $t() → 选 auto-i18n-translation-plugins
  • 愿意包一层 $at() 换长期省心 → 选 i18n-auto-extractor
  • 命令行一把梭 + Excel 协作 → 选 i18n-cli

三款都是 MIT 开源 ,按场景挑一把梭,国际化再也不是体力活

Github 地址

  • i18n-auto-extractorhttps://github.com/qianyuanjia/i18n-auto-extractor
  • auto-i18n-translation-pluginshttps://github.com/auto-i18n/auto-i18n-translation-plugins
  • i18n-clihttps://github.com/IFreeOvO/i18n-cli
相关推荐
QQ1__8115175153 小时前
Spring boot名城小区物业管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
钛态3 小时前
前端微前端架构:大项目的救命稻草还是自找麻烦?
前端·vue·react·web
一粒黑子3 小时前
【实战解析】阿里开源 PageAgent:纯前端 GUI Agent,一行JS让网页支持自然语言操控
前端·javascript·开源
独角鲸网络安全实验室3 小时前
2026微信小程序抓包全解析:从实操落地到合规风控,解锁前端调试新范式
前端·微信小程序·小程序·抓包·系统代理绕过·https证书严格校验·进程隔离
紫微AI3 小时前
前端文本测量成了卡死一切创新的最后瓶颈,pretext实现突破了
前端·人工智能·typescript
GISer_Jing3 小时前
AI前端(From豆包)
前端·aigc·ai编程
IT枫斗者3 小时前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
测试修炼手册3 小时前
[测试技术] 深入理解 JSON Web Token (JWT)
前端·json
AI老李3 小时前
2026 年 Web 前端开发的 8 个趋势!
前端
里欧跑得慢3 小时前
15. Web可访问性最佳实践:让每个用户都能平等访问
前端·css·flutter·web