news 2026/3/5 18:38:39

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
一键 i18n 国际化神库!适配 Vue、React!

一键 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-cliCLI + 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
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/25 12:53:34

pythonstudy Day37

MLP神经网络的训练 PyTorch的安装 我们后续完成深度学习项目中,主要使用的包为pytorch,所以需要安装,你需要去配置一个新的环境。 未来在复现具体项目时候,新环境命名最好是python版本_pytorch版本_cuda版本,例如 p…

作者头像 李华
网站建设 2026/3/5 10:42:25

Linly-Talker结合RAG技术实现知识增强型虚拟客服系统

Linly-Talker结合RAG技术实现知识增强型虚拟客服系统 在银行的智能柜台前,一位老人轻声问:“我这个月养老金涨了多少?”屏幕中的虚拟柜员微微一笑,眼神温和地回应:“根据您所在城市的最新政策,2024年起基础…

作者头像 李华
网站建设 2026/3/5 10:11:31

用Deepseek-v3.1在Trae中编写AI中继程序

用 Deepseek-v3.1 在 Trae 中构建 AI 中继服务:打通国产大模型与 OpenAI 生态的桥梁 在本地开发中,我们常遇到这样一个问题:许多优秀的国产大模型(如百度飞桨星河社区部署的 ERNIE 系列)虽然性能强劲、中文理解出色&a…

作者头像 李华
网站建设 2026/3/5 18:11:06

LobeChat能否实现思维导图输出?结构化内容展示尝试

LobeChat能否实现思维导图输出?结构化内容展示尝试 在AI助手逐渐从“问答工具”演变为“认知协作者”的今天,用户不再满足于一串流水线式的文本回复。他们希望看到逻辑清晰的框架、层次分明的知识体系,甚至是可交互的图表——尤其是在处理复杂…

作者头像 李华
网站建设 2026/3/4 3:57:36

开源5G基站硬件参数

威武纪 高集成RFMC7000模块 SDR软件无线电 AD9371 FMC子卡和拓展卡pcie 300MHz~6GHz频段 SDR 开发评估发射接收卡 双通道收发链路 智邮开源 5G通信验证 射频板卡 OXG-SDR4100 软件无线电 SDR开发板 搭载两颗AD9371 开源5G基站OAI pcie 4路发射 4路接收 300MHz~6GHz …

作者头像 李华
网站建设 2026/3/3 7:43:25

C#开发桌面应用调用GPT-SoVITS REST API实战

C# 桌面应用集成 GPT-SoVITS 实现个性化语音合成实战 在当前 AI 技术快速落地的背景下,语音合成已不再是科研实验室里的“黑箱”技术。越来越多开发者希望将高质量的 TTS 能力嵌入到本地工具中——尤其是那些需要离线运行、保护隐私或具备图形化操作界面的应用场景。…

作者头像 李华