vue-i18n-extract-esm

TypeScript ESModule 一键提取 & 替换 Vue / React / 任意项目中的硬编码中文，自动生成语义化 key，零 AST 语法报错。

1. 安装 bash 复制 npm i -D vue-i18n-extract-esm

or

pnpm add -D vue-i18n-extract-esm 2. 最快上手（默认配置） bash 复制

仅提取中文到 src/lang/zh-CN.json

npx i18n-extract

提取 + 自动把源码中文替换成 $t('xxx')

npx i18n-extract --replace 3. 自定义配置（项目级） 在项目根目录新建 i18n.config.js（或 .json）即可完全覆盖默认行为：

// i18n.config.js
module.exports = {
  src: 'src',
  out: 'src/lang/zh-CN.json',
  ext: ['vue', 'ts'],
  translate: {
    enable: true,           // 是否自动翻译英文
    target: 'en',           // 目标语言
    driver: 'translate',    // 离线包，也可换 'google' / 'baidu'
    enOut: 'src/lang/en-US.json' // 英文文件路径
  },
  replace: { enable: true, fn: '$t', ext: ['vue', 'ts'] }
};```

表格
复制
字段	说明	默认值
src	源码根目录	src
out	中文语言文件路径	src/lang/zh-CN.json
ext	扫描后缀列表	['vue','js','jsx','ts','tsx']
replace.enable	是否自动替换源码	false
replace.fn	国际化函数名	$t
replace.ext	需替换的文件后缀	同 ext
支持 向上递归查找配置；子目录运行也能命中项目根配置。
4. 多项目示例
表格
复制
技术栈	配置模板
Vite + Vue3 + TS	ext:['vue','ts'], fn:'t'
Nuxt3	src:'.', ext:['vue','ts'], fn:'$t'
React + TSX	ext:['tsx','ts'], fn:'i18n.t'
仅提取不替换	replace:{enable:false}
5. 生成 key 规则
中文 → 小写拼音 + 下划线，可读性高：
JSON
复制
{
  "ji_qun_xia_la": "集群下拉",
  "qing_shu_ru_yong_hu_ming": "请输入用户名"
}
6. 目录结构
复制
your-project/
├─ i18n.config.js      # 项目配置（可选）
├─ src/
│  ├─ lang/
│  │  └─ zh-CN.json    # 自动生成
│  └─ App.vue
└─ package.json
7. 常见命令
bash
复制
# 查看当前生效配置
npx i18n-extract --help

# 临时覆盖配置
npx i18n-extract --src apps --out apps/lang/zh-CN.json --replace
8. 注意事项
首次运行前请 commit 代码，方便 diff。
替换后请 eslint --fix 自动格式化。
.vue 文件仅替换 <script> 内容，模板中文已用正则提取，不破坏标签结构。
9. 卸载
bash
复制
npm r -D vue-i18n-extract-esm
「复制配置 → 跑命令 → 中文全部进 JSON」，搞定！