Vite plugin for automatically converting Chinese hardcoded strings to i18n function calls
npm install vue-i18n-auto-pluginVite 插件和 CLI 工具,用于自动将 Vue/TypeScript 项目中的中文硬编码转换为 i18n 函数调用。
支持两种使用方式:
- Vite 插件:在构建时自动转换
- CLI 工具:本地开发时手动转换(推荐)
- ✅ 基于 AST 解析:使用 Babel 和 Vue Compiler SFC 进行代码解析
- ✅ 智能过滤:自动跳过 import/export、对象键、函数参数等不应国际化的上下文
- ✅ 模板字符串支持:自动提取 ${variable} 变量,生成 t('key', { name1: variable }) 格式
- ✅ Vue 文件完整支持:同时处理 和 部分
- ✅ 自动注入 i18n:检测到中文时自动注入 useI18n 导入
- ✅ 自动生成 Key:基于 HMAC-SHA256 生成唯一 key
``bash`
npm install vite-plugin-i18n-auto -D或
yarn add vite-plugin-i18n-auto -D或
pnpm add vite-plugin-i18n-auto -D
在 vite.config.ts 中配置:
`typescript
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生成的前缀
}),
],
});
安装后,可以使用命令行工具进行本地转换:
`bash基本使用(使用默认配置)
npx vue-i18n-auto
CLI 选项:
-
--i18n-path - 主语言文件路径(默认: src/locales/zh-CN.ts)
- --lang-path - 其他语言文件路径,逗号分隔(默认: src/locales/en.ts)
- --pre-text - key 生成的前缀(默认: common.)
- --key-length - 生成的 key 长度(默认: 16)
- --crypto-key - 加密密钥(默认: i18n)
- --help, -h - 显示帮助信息示例:
`bash
使用自定义前缀
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生成的前缀 |转换示例
$3
`vue
欢迎使用
这是一个测试
`$3
`vue
{{ t('common.xxxxx') }}
{{ t('common.zzzzz') }}
`语言文件格式
$3
`typescript
export default {
"common.xxxxx": "欢迎使用",
"common.yyyyy": "点击查看详情",
"common.zzzzz": "这是一个测试",
"common.aaaaa": "你好,{name1}!"
}
`$3
`typescript
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` 格式MIT