1. 前言
国际化适配一直以来都是一个棘手的问题，尤其是在项目一开始没有考虑的情况下，我们需要修改大量源码，使用类似于 ${t.xxx} 的占位符去一一修改我们已经写好的文字（如最耳熟能详的vue-i18n）。这个工程量在项目后期是巨大的，令人无法接受的。
目前，网上有五花八门的国际化方案，但是大部分都只解决了基础问题——能用，但是都存在这个痛点——太麻烦了。
好，那么有没有一款插件，让我们不用自己动手做这件事呢？
- 可以使用 auto-i18n-translation-plugins 插件实现。
2. auto-i18n-translation-plugins 使用教程
- 第一步
# 如果你是Vite玩家（比如Vue3、react项目）
npm install vite-auto-i18n-plugin --save-dev
# 如果你是Webpack钉子户（比如React老项目）
npm install webpack-auto-i18n-plugin --save-dev
- 第二步，配置插件,在vite.config.ts 加入以下配置
vite.config.ts
// vite.config.js
import { defineConfig } from 'vite';
import vitePluginAutoI18n from 'vite-auto-i18n-plugin';
export default defineConfig({
plugins: [ vitePluginAutoI18n({
targetLangList: ['en', 'ja', 'ko'],
translator: new YoudaoTranslator({ // 用有道！不用翻墙！
appId: '你的白嫖ID', // 去官网申请，10秒搞定
appKey: '你的密钥' // 别用示例里的，会炸！
})
})
]
});
- 第三步，在主入口文件引入文件
main.ts
// 这是插件的生命线！必须放在最前面！
import '../lang/index.js'; // 运行插件之后会自动生成引入即可
- 第四步，运行命令，让插件提前生成所有翻译。
npm run build
- 切换多语言,在需要的地方加上一下代码进行切换
插件将在 localStorage 中获取到当前语言，所以切换语言时你只需：
window.localStorage.setItem('lang', value) // 你在 targetLangList 参数中传入的字符串，如 'en'
window.location.reload()
3.有道翻译 api申请
image.png
image.png
- 申请完之后，把应用id和密钥粘贴到vite.config.ts 插件中。
4. 优点
此插件的和目前市面上的插件的根本区别在于，将翻译、文本替换这两步都自动化了，翻译是前置执行的，而替换过程是在构建过程中发生的，对于使用者来说是不可见且无需关心的，使用之后，项目中的任何文本都无需改动，且插件也不会去修改我们的代码，看起来一切如旧！妙哉。
对于传统方式来说，使用此插件之后，工作量将降低 90% 以上。
由于机器翻译可能对于特定语境存在偏差，所以翻译可能不是 100% 准确，这时候我们可以手动去修改少量的翻译文本产物。
插件成功运行后，将在根目录下生成一个 lang 文件夹，lang/index.json 就是生成后的翻译。
5. 问题汇总
1.怎么修改翻译内容？
1.1 修改入口
插件会自动生成 lang/ 目录下的index.json文件，需在此文件中直接修改翻译结果：
"hash_key_1": {
"zh-cn": "中文原文",
"en": "EDIT THIS!" // 直接修改目标语言内容
},
"another_hash": {
"ja": "日本語を編集",
"ru": "Русский текст"
}
}
1.2 注意事项
翻译键（如 hash_key_1）是基于语言生成的唯一哈希标识，不可修改！
2. 如何排除不需要翻译的文本？
2.1 排除语法
默认可通过包裹 $$t() 注释文本：
// 需要翻译的内容
const text = 'Hello World!'; // ✅ 自动收录
// 不需要翻译的内容
const name = $$t('Tom'); // ❌ 被排除，不会被翻译
3. 能否翻译英文项目？
注意：中日韩俄 四国语言的key 必须是 zh-cn/ja/ko/ru，无论来源语言还是目标语言
- 1 核心规则对比表
| 模式类型 | 源语言限制 | 目标语言约束 | 必需的操作 |
|---|---|---|---|
| 全自动(full-auto) | 必须为中日韩俄（zh-cn/ja/ko/ru） | 目标语言必须来自四国 | 无需人工标记 |
| 半自动(semi-auto) | 支持任意语言 | 四国语言需使用标准Key | 必须人工标记翻译文本 |
- 2 配置英文项目的步骤
// 配置半自动模式支持英文源语言
vitePluginsAutoI18n({
translateType: 'semi-auto', // 🔴 必选半自动模式
originLang: 'en', // 源语言设为英文
targetLangList: ['zh-cn', 'ja'],
translator: new YoudaoTranslator({
appId: 'YOUR_ID',
appKey: 'YOUR_KEY'
})
});
- 3 开发者操作流程
人工标记需要翻译的文本：
<!-- 原始英文文案 -->
<div>Hello bro</div>
<!-- 手动包裹 `$t()` 注释 -->
<div>{{ $t('Hello bro') }}</div>
首次构建生成翻译文件：
插件会自动生成如下的中日翻译：
// lang/en.json
{
"key_123": {
"en": "Hello bro",
"zh-cn": "你好兄弟",
"ja": "こんにちは"
}
}
- 4 疑难问题
问：为什么不能用全自动模式？
答：
全自动模式需要依赖源语言的正则规则扫描文本，中日韩俄都有特色的正则匹配规则。
英文原文的语言，没有具有特色的正则匹配规则，因此扫描逻辑需人工标注后触发（见标记语法）。
4. 配置约束
+ 当选择 `full-auto` 模式时：
```json
"originLang": "zh-cn" | "ja" | "ko" | "ru" // 来源语言只能选这些
中日韩俄语言在配置中必须使用标准化Key（禁止使用 zh-CN、japanese 等非标准值）
5. 兼容 Vue-i18n
- 1 解决命名冲突
若原来的Vue-i18n项目已存在 $t() 函数，需修改插件的翻译标识符：
vitePluginsAutoI18n({
translateKey: '$a18n', // 新的翻译函数名
excludedCall: ['$t'] // 过滤 Vue-i18n 的原始函数
});
- 2 在 Vue 中并存使用
<!-- 使用 Vue-i18n 的本地化文本 -->
<h1>{{ $t('greeting') }}</h1>
<!-- 半自动情况下，使用插件翻译的通用文本 -->
<div>{{ $a18n('大家好') }}</div>
<!-- 全自动情况下，使用插件翻译的通用文本 -->
<div>大家好</div>
</template>
6. ⚠️ 关键注意事项
-
服务稳定性
谷歌翻译需确保代理稳定
百度/有道超出免费额度将 导致 翻译 错误 -
文件管理规范
请将翻译文件纳入版本控制（如 Git） -
功能限制
全自动模式仅支持中日韩俄为源语言，禁止修改
半自动模式下，若翻译目标包含中日韩俄，必须使用标准语言代码
网友评论