Vue-i18n-generator：一键实现Vue项目国际化，开发效率提升10倍的秘密武器

兜里侑糖
100 阅读3分钟

作为一名Vue开发者，你是否曾经为项目的国际化工作感到头疼？手动翻译中文、替换为$t(key)、维护翻译文件...这些繁琐的工作不仅耗时，还容易出错。今天我要为大家介绍一个刚刚发布的神器——vue-i18n-generator，它能让你的国际化开发效率提升10倍！

什么是vue-i18n-generator？

vue-i18n-generator是一个专为Vue项目设计的国际化自动化工具。它能够：

  • 🔍 智能扫描项目中的所有中文文本
  • 🔄 自动替换为Vue-i18n的$t(key)语法
  • 📁 生成翻译文件，支持多种语言格式
  • 🌍 集成翻译API，自动翻译新增内容
  • ⚡ 支持Vue2/Vue3，开箱即用

为什么选择它？

传统的国际化流程通常是：

  1. 开发人员手动寻找页面中的中文
  2. 手动替换为$t('xxx.xxx')
  3. 手动维护翻译文件
  4. 翻译人员手动翻译每个key

而使用vue-i18n-generator后：

  1. 运行一条命令，自动完成所有工作
  2. 支持增量更新，只处理新增的中文
  3. 集成翻译API，自动完成翻译
  4. 生成规范化的key命名，便于维护

快速开始

安装

bash

复制

# 全局安装
npm install vue-i18n-generator -g

# 或本地安装
npm install vue-i18n-generator --save-dev

基本使用

bash

复制

# 开发环境：提取中文并生成翻译文件
translator dev -d src -o src/locales -l zh-cn zh-tw en --v2

# 测试环境：额外生成对照文件（.lang后缀）
translator test -d src -o src/locales -l zh-cn zh-tw en --v2

# 生产环境：直接替换原文件
translator prod

集成到package.json

JSON

复制

{
  "scripts": {
    "i18n:dev": "translator dev -o src/locales -l zh-cn en -t en --channel baidu --appKey YOUR_KEY --secretKey YOUR_SECRET",
    "i18n:test": "translator test -o src/locales -l zh-cn en --v2",
    "i18n:prod": "translator prod"
  }
}

深度解析：它到底做了什么？

让我们通过一个实际例子来看看这个工具的神奇之处：

处理前的代码

vue

复制

<template>
  <div>
    <h1>用户管理</h1>
    <el-form-item label="用户名">
      <el-input placeholder="请输入用户名" />
    </el-form-item>
    <p>当前用户：{{ username }}</p>
    <el-button>{{ isEdit ? '保存' : '编辑' }}</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '操作成功'
    }
  },
  methods: {
    handleSubmit() {
      this.$message.success('提交成功')
    }
  }
}
</script>

处理后的代码

vue

复制

<template>
  <div>
    <h1>{{ $t('user.yong_hu_guan_li') }}</h1>
    <el-form-item :label="$t('user.yong_hu_ming')">
      <el-input :placeholder="$t('user.qing_shu_ru_yong_hu_ming')" />
    </el-form-item>
    <p>{{ $t('user.dang_qian_yong_hu') }}：{{ username }}</p>
    <el-button>{{ isEdit ? $t('user.bao_cun') : $t('user.bian_ji') }}</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: this.$t('user.cao_zuo_cheng_gong')
    }
  },
  methods: {
    handleSubmit() {
      this.$message.success(this.$t('user.ti_jiao_cheng_gong'))
    }
  }
}
</script>

生成的翻译文件

JSON

复制

{
  "user": {
    "__filePath": "/views/user/index.vue",
    "yong_hu_guan_li": "用户管理",
    "yong_hu_ming": "用户名",
    "qing_shu_ru_yong_hu_ming": "请输入用户名",
    "dang_qian_yong_hu": "当前用户",
    "bao_cun": "保存",
    "bian_ji": "编辑",
    "cao_zuo_cheng_gong": "操作成功",
    "ti_jiao_cheng_gong": "提交成功"
  }
}

高级特性

1. 智能key生成策略

工具会根据文件路径和中文内容智能生成key：

  • 文件名 + 拼音（不超过20字符）
  • 支持自定义公共多语言（创建translator.json）
  • 避免重复key，自动处理冲突

2. 模板字符串处理

vue

复制

<!-- 原始代码 -->
<p>{{ `欢迎 ${username}，今天是 ${date}` }}</p>
<p>{{ `确定要删除 ${count} 条记录吗？` }}</p>

<!-- 处理后 -->
<p>{{ $t('welcome.message', [username, date]) }}</p>
<p>{{ $t('confirm.delete.records', [count]) }}</p>

3. 条件表达式处理

vue

复制

<!-- 原始代码 -->
<el-button>{{ isEdit ? '保存' : '取消' }}</el-button>
<el-form-item :label="isRequired ? '必填项' : '选填项'"></el-form-item>

<!-- 处理后 -->
<el-button>{{ isEdit ? $t('common.save') : $t('common.cancel') }}</el-button>
<el-form-item :label="isRequired ? $t('form.required') : $t('form.optional')"></el-form-item>

4. 集成翻译API

支持百度翻译和自定义翻译接口：

bash

复制

# 使用百度翻译
translator dev -t en --channel baidu --appKey YOUR_KEY --secretKey YOUR_SECRET

# 使用自定义翻译接口
translator dev -t en --channel custom --appKey http://your-api/translate --secretKey YOUR_TOKEN

5. 排除特定文件

bash

复制

# 排除特定文件
translator dev -e console.log debug.vue test.js

最佳实践

1. 项目结构建议

复制

src/
├── locales/
│   ├── locale.json        # 主语言文件
│   ├── en-us.json         # 英文翻译
│   └── zh-tw.json         # 繁体中文
├── views/
├── components/
└── utils/

2. 配置i18n

JavaScript

复制

import { createI18n } from 'vue-i18n'
import localeZhCn from '@/locales/locale.json'
import localeEnUs from '@/locales/en-us.json'

export const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  missing: () => ' ',
  locale: sessionStorage.getItem('locale') || 'zh-cn',
  messages: {
    'zh-cn': localeZhCn,
    'en-us': localeEnUs
  }
})

3. 处理defineProps和defineEmits的限制

在Vue3的<script setup>中，由于defineProps和defineEmits会被提升到模块作用域，不能直接使用t方法：

vue

复制

<script setup>
import { getCurrentInstance } from 'vue'

// 错误用法
// defineProps({
//   title: {
//     type: String,
//     default: t('user.title') // ❌ 会报错
//   }
// })

// 正确用法
const { proxy } = getCurrentInstance()
defineProps({
  title: {
    type: String,
    default: proxy.$t('user.title') // ✅ 使用i18n.global.t
  }
})
</script>

常见问题解答

Q: 会不会误处理我的代码？

A: 工具会智能识别，保留：

  • 注释中的中文
  • console.log中的中文
  • 非Vue文件的原始内容

Q: 如何重新翻译？

A: 删除locale.json中对应的key，重新执行命令即可。

Q: 支持哪些翻译服务？

A: 目前支持百度翻译和自定义翻译接口，未来会加入有道翻译等更多服务。

Q: Vue2和Vue3都支持吗？

A: 是的，通过--v2参数指定Vue2版本，默认支持Vue3。

性能与效果

根据实际项目测试：

  • 🚀 处理速度：每分钟可处理1000+个Vue文件
  • 🎯 准确率：99.5%+ 的中文提取准确率
  • ⏱️ 效率提升：相比手动处理，效率提升10倍以上
  • 🔄 增量更新：只处理新增内容，避免重复工作

未来展望

作者已经在规划更多强大功能：

  • 支持更多翻译服务（有道、谷歌等）
  • 批量翻译优化，提升翻译效率
  • 翻译记忆功能，避免重复翻译

总结

vue-i18n-generator是一个真正解决开发者痛点的工具，它让Vue项目的国际化工作变得前所未有的简单。无论你是维护一个大型项目，还是刚开始一个新项目，这个工具都能为你节省大量时间和精力。

还在等什么？赶快试试吧！

avatar
文章
阅读
粉丝