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

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

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

🎯i18n-auto-extractor

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

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

使用 3 步走

npm i -D i18n-auto-extractor
npx i18n-auto-extractor   # 生成配置文件

// 代码里包一层即可
const title = $at('欢迎来到我的网站')

构建后会自动生成：

locales/
├─ zh.json   // 原中文
├─ en.json   // 自动翻译
├─ fr.json   // ...

🎯auto-i18n-translation-plugins

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

• 完全零侵入，Babel 扫描无需改代码
• Vite / Webpack / Rollup 插件形态全覆盖
• Google、有道、百度翻译源任意切换
• 增量构建，只翻译新增文案省流量

npm i -D vite-auto-i18n-plugin@^1.0.23

使用示例（Vite）

npm i -D vite-auto-i18n-plugin@^1.0.23

// 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 步走

npm i -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

几乎所有前端同学都有类似经历：

• npm run dev 跑起来，终端里出现一行 Network: http://192.168.x.x:5173/。
• 复制 → 切微信 → 发给自己 → 手机点开 → 手输缺失的路径 → 终于可以调试了。

步骤不多，但一天重复 N 次就会抓狂，尤其在真机调试布局、手势、深色模式时。

vite-plugin-qrcode 就是解决这个「不起眼却高频」的痛点

什么是 vite-plugin-qrcode？

vite-plugin-qrcode 是一个用于 Vite 开发环境的轻量插件

它会在启动 dev-server 时自动把局域网地址转成二维码并打印到终端，手机一扫即可进入页面。
功能虽小，却让移动端调试体验瞬间拉满。

插件简介

条目	信息
名称	vite-plugin-qrcode
仓库	github.com/svitejs/vit…
体积	< 20 kB，零运行时依赖
适用	Vite 2+ / 3+ / 4+ / 5+
环境	仅在 vite dev 或 vite preview --host 阶段生效，构建阶段自动剔除

快速上手

• 安装

   npm i -D vite-plugin-qrcode

• 配置 vite.config.*

   import { defineConfig } from 'vite'
   import { qrcode } from 'vite-plugin-qrcode'

   export default defineConfig({
     plugins: [
       qrcode()   // 就这么简单
     ]
   })

• 启动并暴露局域网地址

   vite --host

• 终端输出示例：

手机扫码即可进入页面，热更新、sourcemap 完全正常。

可选配置

• filter：当你的电脑有多块网卡时，可指定只对某些地址生成二维码：

  qrcode({
    filter: url => url.includes('192.168.1')
  })

典型使用场景

• 真机布局调试
  写一段媒体查询，手机直接看效果，不再折腾 Chrome DevTools 的 Device Mode。
• 手势/滚动测试
  PC 模拟器无法 100% 还原移动端滚动曲线、长按、双击。
• 快速分享本地 DEMO
  给产品、UI、后端同学一个二维码，立刻预览，无需部署测试环境。
• 自动化测试扫码入口
  把二维码贴到测试报告里，让 QA 直接扫码回归。

注意事项

• 必须在同一局域网
  电脑和手机连同一 WiFi；公司网络若做 AP 隔离，需让运维放行。
• 启动时加 --host
  否则 Vite 只监听 localhost，手机无法访问。
• HTTPS 证书
  若开启 server.https，iOS/Android 需先信任自签证书，否则会白屏。
• 端口占用/防火墙
  Windows 需放行 5173 端口；Mac/Linux 一般无额外设置。
• 构建后自动失效
  插件仅在 dev 和 preview 阶段生效，生产包不会把二维码代码打进去，放心使用。

把 vite-plugin-qrcode 加进 plugins，从此告别手动复制地址，开发服务器一启动，手机扫码即可调试。

• Github 地址：https://github.com/svitejs/vite-plugin-qrcode

写给还在纠结用 Next 还是 Nuxt 的你 如果你已经厌倦了： 每次 npm install 都要等半天 打包体积动不动就几百 KB 起步 想部署到边缘节点还得研究 Vercel、Netlify