企业官网建设流程全解析

一键 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"}

🎯 场景速选指南

🏁 总结

• 不想写 $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