Vue I18n Chinese Extractor

一个强大的Vue.js国际化插件，能够自动检测项目中的中文字符串，并提供批量替换、国际化文件生成等功能。

✨ 特性

• 🔍 智能检测: 自动扫描项目中的中文字符串
• 🔄 批量替换: 将中文字符串替换为 $t() 调用
• 📁 文件生成: 自动生成多语言国际化文件
• 🎯 精确匹配: 排除注释、已处理内容等
• 📊 预览功能: 支持HTML、JSON、CSV等格式的预览报告
• ⚙️ 灵活配置: 支持自定义扫描规则和生成策略

📦 安装

npm install vue-i18n-chinese-extractor --save-dev

🚀 快速开始

1. 初始化配置

npx vue-i18n-chinese-extractor init

这将在项目根目录创建 i18n-plugin.config.json 配置文件。

2. 扫描项目

npx vue-i18n-chinese-extractor scan

3. 预览替换

# 控制台预览
npx vue-i18n-chinese-extractor preview

# 生成HTML报告
npx vue-i18n-chinese-extractor preview --format html --output ./preview.html

4. 执行替换

npx vue-i18n-chinese-extractor replace

5. 生成国际化文件

npx vue-i18n-chinese-extractor generate

⚙️ 配置

配置文件 i18n-plugin.config.json 示例：

{
  "rootDir": "./src",
  "extensions": [".vue", ".ts", ".js"],
  "excludeDirs": ["node_modules", "dist"],
  "excludeFiles": ["*.min.js"],
  "outputDir": "./src/locale",
  "languages": ["zh-Hans", "en"],
  "keyGeneration": {
    "strategy": "chinese",
    "allowChineseKey": true,
    "keyFormat": "original"
  },
  "replacement": {
    "methodName": "$t"
  }
}

配置项说明

| 配置项 | 类型 | 默认值 | 说明 | |--------|------|--------|---------| | rootDir | string | process.cwd() | 项目根目录 | | extensions | string[] | [".vue", ".ts", ".js"] | 扫描的文件扩展名 | | excludeDirs | string[] | ["node_modules"] | 排除的目录 | | excludeFiles | string[] | [] | 排除的文件模式 | | outputDir | string | "./locale" | 国际化文件输出目录 | | languages | string[] | ["zh-Hans", "en"] | 支持的语言 | | keyGeneration.strategy | string | "semantic" | key生成策略 | | keyGeneration.allowChineseKey | boolean | false | 是否允许中文key | | replacement.methodName | string | "$t" | 替换方法名 |

📋 命令行选项

scan - 扫描项目

npx vue-i18n-chinese-extractor scan [options]

选项:
  -c, --config <path>    配置文件路径
  -o, --output <path>    输出扫描结果到文件

preview - 预览替换

npx vue-i18n-chinese-extractor preview [options]

选项:
  -c, --config <path>       配置文件路径
  -o, --output <path>       输出预览报告路径
  --format <format>         输出格式 (console|html|json|csv)
  --max-files <number>      控制台预览最大文件数

replace - 执行替换

npx vue-i18n-chinese-extractor replace [options]

选项:
  -c, --config <path>    配置文件路径
  -y, --yes              跳过确认直接执行
  --backup               创建备份文件
  --dry-run              模拟运行，不实际修改文件

generate - 生成国际化文件

npx vue-i18n-chinese-extractor generate [options]

选项:
  -c, --config <path>       配置文件路径
  -o, --output <path>       输出目录
  --languages <languages>   目标语言 (逗号分隔)

🔧 Key生成策略

插件支持多种key生成策略：

• semantic: 语义化key生成（默认）
• pinyin: 拼音转换
• hash: 哈希值生成
• sequential: 序列号生成
• chinese: 直接使用中文作为key

📝 使用示例

项目集成

在 package.json 中添加脚本：

{
  "scripts": {
    "i18n:scan": "vue-i18n-chinese-extractor scan",
    "i18n:preview": "vue-i18n-chinese-extractor preview --format html --output ./i18n-preview.html",
    "i18n:replace": "vue-i18n-chinese-extractor replace",
    "i18n:generate": "vue-i18n-chinese-extractor generate"
  }
}

替换前后对比

替换前:

<template>
  <div>{{ "欢迎使用" }}</div>
  <button>{{ "确认" }}</button>
</template>

替换后:

<template>
  <div>{{ $t("欢迎使用") }}</div>
  <button>{{ $t("确认") }}</button>
</template>

生成的国际化文件:

zh-Hans.json:

{
  "欢迎使用": "欢迎使用",
  "确认": "确认"
}

en.json:

{
  "欢迎使用": "欢迎使用",
  "确认": "确认"
}

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🔗 相关链接

• Vue I18n
• Vue.js