作为一名前端开发,给项目做多语言早已是家常便饭。
可每次面对成百上千条文案,"一行行手动翻译
+ 维护 N 个 JSON 文件
"仍然是让人头秃的体力活。
今天就把我实测有效的 3 款零入侵、一键式国际化神库 分享给大家------Vue2/3、React 都能用,真正做到"写完代码就出国"。
🎯i18n-auto-extractor
用 $at()
包一层,剩下的交给机器人
- 安装即可跑,
零配置
开箱即用 Vue
、React
、原生项目全部通吃- 内置谷歌翻译,支持
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-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