Vue 国际化自动翻译工具 vue-translate-auto

原创于 2025-08-22 11:51:57 发布 · 1.3k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #i18n #npm #多语言 #国际化

i18n 同时被 3 个专栏收录

1 篇文章

订阅专栏

国际化

1 篇文章

订阅专栏

npm

1 篇文章

订阅专栏

📖 前言

在 Vue 项目开发中，国际化（i18n）是一个绕不开的话题。传统的国际化方案需要手动维护多语言文件，不仅工作量大，而且容易出错。今天给大家介绍一个我开发的 Vue 国际化自动翻译工具 —— vue-translate-auto，它能够自动提取代码中的翻译字符串并生成多语言文件，大大提升开发效率！

🌟 工具简介

vue-translate-auto 是一个专为 Vue 项目设计的国际化自动翻译工具，支持自动提取 $t()、t()、this.$t() 等翻译函数包裹的字符串，并能够自动翻译成多种语言。

GitHub: https://github.com/D5498543/translate-auto
Gitee: https://gitee.com/D5498543/vue-translate-auto
NPM: vue-translate-auto - npm

✨ 核心特性

🔍 智能提取

自动识别多种翻译函数格式

支持 $t('key')、t('key')、this.$t('key') 等

可配置提取关键词，灵活适配不同项目

�� 多语言支持

完全支持: 英语、日语、韩语、简体中文

部分支持: 法语、德语、西班牙语、俄语
支持自定义语言配置

📈 增量翻译

智能检测已有翻译和新词汇
只翻译新增内容，保留已有翻译
大幅提升重复运行效率

�� 多种翻译API

有道翻译 ⭐⭐⭐⭐⭐ (推荐，质量最高)
Google翻译 ⭐⭐⭐⭐ (免费，无需密钥)
⚡ 高性能
智能重试机制，确保翻译成功率
指数退避策略，避免API限制
实时进度显示和详细统计

🚀 快速开始

1. 安装依赖

npm install -D vue-translate-auto
# 或者
yarn add -D vue-translate-auto

2. 创建配置文件

在项目根目录创建 vue-translate-config.json 文件：

{
  "targetPath": "src/lang.json",
  "filePath": "src",
  "fileSuffix": [".vue", ".js", ".jsx", ".ts", ".tsx"],
  "excludes": ["node_modules", "dist"],
  "extractKeywords": ["$t", "t", "this.$t", "this.t"],
  "translation": {
    "enabled": true,
    "targetLanguages": ["en", "ja", "ko", "zh-CN"],
    "sourceLanguage": "zh-CN",
    "outputDir": "src/langs",
    "api": {
      "provider": "youdao",
      "apiKey": "your-api-key",
      "apiSecret": "your-api-secret"
    }
  }
}

3. 运行翻译

# 启用翻译功能
npx vue-translate-auto

# 或者禁用翻译，只提取词汇
# 在配置中设置 "enabled": false

�� 使用示例

Vue 组件示例

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <p>{{ $t('description') }}</p>
    <button>{{ $t('submit') }}</button>
  </div>
</template>

<script>
export default {
  name: 'TestComponent',
  methods: {
    showMessage() {
      console.log(this.$t('message'))
    }
  }
}
</script>

JavaScript 文件示例

// utils/message.js
export const showMessage = (type, key) => {
  const message = this.$t(key)
  this.$message[type](message)
}

export const getButtonText = (action) => {
  return this.$t(`button.${action}`)
}

📁 输出文件结构

运行工具后，会生成以下文件结构：

src/
├── lang.json # 词汇提取文件（翻译功能禁用时）
└── langs/ # 翻译文件目录（翻译功能启用时）
├── zh-CN.json # 源语言（中文）
├── en.json # 英语翻译
├── ja.json # 日语翻译
├── ko.json # 韩语翻译
├── fr.json # 法语翻译
└── de.json # 德语翻译

文件内容示例

zh-CN.json (源语言)

{
  "welcome": "欢迎",
  "description": "描述",
  "submit": "提交",
  "message": "消息"
}

en.json (英语翻译)

{
  "welcome": "welcome",
  "description": "description",
  "submit": "submit",
  "message": "message"
}

⚙️ 配置详解

核心配置

配置项	说明	默认值
targetPath	词汇提取文件输出路径	src/lang.json
filePath	需要扫描的源代码目录	src
fileSuffix	支持的文件扩展名	[".vue", ".js", ".jsx", ".ts", ".tsx"]
excludes	排除的目录列表	["node_modules", "dist"]
extractKeywords	需要提取的翻译函数关键字	["$t", "t", "this.$t"]

翻译配置

配置项	说明	默认值
enabled	是否启用翻译功能	false
targetLanguages	目标语言列表	["en", "ja", "ko", "zh-CN"]
sourceLanguage	源语言（提取的字符串语言）	zh-CN
outputDir	翻译文件输出目录	src/langs
api.provider	翻译服务提供商	youdao

�� 高级功能

增量翻译

工具支持增量翻译，只翻译新增的词汇，保留已有翻译：

# 第一次运行：翻译所有词汇
npx vue-translate-auto

# 添加新词汇后再次运行：只翻译新增内容
npx vue-translate-auto

智能重试

内置智能重试机制，自动处理网络错误和API限制：

最大重试次数：8次

指数退避策略：基础延迟3秒，最大30秒

自动重试失败的翻译请求

进度显示

实时显示翻译进度和统计信息：

🚀 开始翻译到 en 语言
📊 总计需要翻译: 15 个词汇
[██████████████████████████████] 100.0% (15/15) ✓ 完成

�� en 语言翻译完成！
📊 最终统计:
   • 总词汇数: 15
   • 成功翻译: 15
   • 失败词汇: 0
   • 成功率: 100.0%
   • 总耗时: 8.2秒