vue-i18n-auto-plugin

Vite 插件和 CLI 工具，用于自动将 Vue/TypeScript 项目中的中文硬编码转换为 i18n 函数调用。

支持两种使用方式：

• Vite 插件：在构建时自动转换
• CLI 工具：本地开发时手动转换（推荐）

功能特点

• ✅ 基于 AST 解析：使用 Babel 和 Vue Compiler SFC 进行代码解析
• ✅ 智能过滤：自动跳过 import/export、对象键、函数参数等不应国际化的上下文
• ✅ 模板字符串支持：自动提取 ${variable} 变量，生成 t('key', { name1: variable }) 格式
• ✅ Vue 文件完整支持：同时处理 <template> 和 <script> 部分
• ✅ 自动注入 i18n：检测到中文时自动注入 useI18n 导入
• ✅ 自动生成 Key：基于 HMAC-SHA256 生成唯一 key

安装

npm install vite-plugin-i18n-auto -D
# 或
yarn add vite-plugin-i18n-auto -D
# 或
pnpm add vite-plugin-i18n-auto -D

使用方法

方式一：作为 Vite 插件使用（构建时转换）

在 vite.config.ts 中配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import I18nAutoPlugin from 'vite-plugin-i18n-auto';

export default defineConfig({
  plugins: [
    vue(),
    I18nAutoPlugin({
      i18nPath: 'src/locales/zh-CN.ts',        // 主语言文件路径
      langPath: ['src/locales/en.ts'],         // 其他语言文件路径数组
      regi18n: 'useI18n',                      // 判断是否已引入i18n的标识
      excludes: ['locale', 'useI18n'],         // 排除的文件名
      tempText: 't',                           // 模板中使用的函数名
      jsText: 't',                             // JS中使用的函数名
      injectToJS: `\nimport { useI18n } from 'vue-i18n'\nconst { t } = useI18n()\n`,
      delay: 1000,                             // 防抖延迟时间（毫秒）
      reserveKeys: [],                         // 生产环境需要保留的key
      runBuild: true,                          // 是否在打包时执行
      keyLength: 16,                           // 生成的key长度
      cryptoKey: 'i18n',                       // 加密密钥
      preText: 'common.',                      // key生成的前缀
    }),
  ],
});

方式二：使用 CLI 进行本地转换（推荐）

安装后，可以使用命令行工具进行本地转换：

# 基本使用（使用默认配置）
npx vue-i18n-auto

# 或全局安装后使用
npm install -g vue-i18n-auto-plugin
vue-i18n-auto

# 自定义配置
npx vue-i18n-auto --i18n-path src/locales/zh-CN.ts --pre-text app.

CLI 选项：

• --i18n-path <path> - 主语言文件路径（默认: src/locales/zh-CN.ts）
• --lang-path <paths> - 其他语言文件路径，逗号分隔（默认: src/locales/en.ts）
• --pre-text <text> - key 生成的前缀（默认: common.）
• --key-length <number> - 生成的 key 长度（默认: 16）
• --crypto-key <key> - 加密密钥（默认: i18n）
• --help, -h - 显示帮助信息

示例：

# 使用自定义前缀
npx vue-i18n-auto --pre-text app.

# 指定多个语言文件
npx vue-i18n-auto --lang-path src/locales/en.ts,src/locales/ja.ts

配置选项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | i18nPath | string | 'src/locales/zh-CN.ts' | 主语言文件路径（通常是中文） | | langPath | string[] | ['src/locales/en.ts'] | 其他语言文件路径数组 | | regi18n | string | 'useI18n' | 判断是否已引入i18n的标识 | | excludes | string[] | ['locale', 'useI18n'] | 排除的文件名或路径 | | tempText | string | 't' | 模板中使用的函数名 | | jsText | string | 't' | JS中使用的函数名 | | injectToJS | string | '\nimport { useI18n } from \'vue-i18n\'\nconst { t } = useI18n()\n' | 自动注入的代码 | | delay | number | 1000 | 防抖延迟时间（毫秒） | | reserveKeys | string[] | [] | 生产环境需要保留的key | | runBuild | boolean | false | 是否在打包时执行 | | keyLength | number | 16 | 生成的key长度 | | cryptoKey | string | 'i18n' | 加密密钥 | | preText | string | '' | key生成的前缀 |

转换示例

转换前

<template>
  <div>
    <h1>欢迎使用</h1>
    <p :title="'点击查看详情'">这是一个测试</p>
  </div>
</template>

<script setup>
const message = `你好，${userName}！`;
</script>

转换后

<template>
  <div>
    <h1>{{ t('common.xxxxx') }}</h1>
    <p :title="t('common.yyyyy')">{{ t('common.zzzzz') }}</p>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const message = t('common.aaaaa', { name1: userName });
</script>

语言文件格式

zh-CN.ts

export default {
  "common.xxxxx": "欢迎使用",
  "common.yyyyy": "点击查看详情",
  "common.zzzzz": "这是一个测试",
  "common.aaaaa": "你好，{name1}！"
}

en.ts

export default {
  "common.xxxxx": "Welcome",
  "common.yyyyy": "Click to view details",
  "common.zzzzz": "This is a test",
  "common.aaaaa": "Hello, {name1}!"
}

注意事项

1. 开发环境性能：在开发环境启用可能会影响构建速度，建议只在生产环境启用
2. 自动注入：插件会自动检测并注入 useI18n，但如果文件结构复杂可能无法正确注入
3. Key 生成：相同的中文文本总是生成相同的 key
4. 文件格式：语言文件必须使用 export default 格式

License

MIT