一键 i18n 国际化神库!适配 Vue、React!
作为一名前端开发,给项目做多语言早已是家常便饭。
可每次面对成百上千条文案,“一行行手动翻译+维护 N 个 JSON 文件”仍然是让人头秃的体力活。
今天就把我实测有效的3 款零入侵、一键式国际化神库分享给大家——Vue2/3、React 都能用,真正做到“写完代码就出国”。
🎯i18n-auto-extractor
用 $at() 包一层,剩下的交给机器人
- 安装即可跑,零配置开箱即用
- Vue、React、原生项目全部通吃
- 内置谷歌翻译,支持 100+ 语言
- 极小包体,运行时动态切换语言
使用 3 步走
npmi -D i18n-auto-extractor npx i18n-auto-extractor# 生成配置文件// 代码里包一层即可consttitle=$at('欢迎来到我的网站')构建后会自动生成:
locales/ ├─ zh.json // 原中文 ├─ en.json // 自动翻译 ├─ fr.json // ...🎯auto-i18n-translation-plugins
连 $t() 都不用写,源码中文自动翻译
- 完全零侵入,Babel 扫描无需改代码
- Vite / Webpack / Rollup 插件形态全覆盖
- Google、有道、百度翻译源任意切换
- 增量构建,只翻译新增文案省流量
npmi -D vite-auto-i18n-plugin@^1.0.23使用示例(Vite)
npmi -D vite-auto-i18n-plugin@^1.0.23// vite.config.tsimportviteAutoI18nfrom'vite-auto-i18n-plugin'exportdefaultdefineConfig({plugins:[vue(),viteAutoI18n({targetLangList:['en','ja','ko'],translator:newYoudaoTranslator({appId:'xxx',appKey:'xxx'})})]})构建完成后自动生成 lang/index.json,直接引入即可使用。
🎯i18n-cli
命令行一把梭,老项目 5 分钟上线多语言
- CLI 一键扫描并替换中文为 t(‘xxx’)
- Excel 导入导出,翻译团队协作零门槛
- 支持百度、谷歌、有道多翻译源
- 增量模式仅处理新增文案,避免重复劳动
使用 2 步走
npmi -g @ifreeovo/i18n-extract-cli it --locales en,ja# 全量翻译it --incremental# 仅增量产物示例:
// 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-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