module-translater

module-translater

介绍

这是一个Vue项目自动翻译工具包

安装

npm install module-translater --save-dev [-g]

命令参数

translater <env>  options

Arguments:
  env                        指定环境: dev(开发)/test(测试)/prod(生产)，默认为dev

Options:
  -d, --dir <dir>            指定需翻译的文件夹
  -s, --suffix <value>       指定需翻译的文件名后缀
  -e, --excludes <value...>  指定不需要翻译的文件，可指定多个
  -o, --output <file>        指定输出翻译写入的文件路径，默认为跟目录下,支持js、json，默认locals.json
  --strict                   是否严格模式,，严格模式只提取$t()内的中文，否则提取全局中文

• env参数详解：
  • dev 仅输出翻译文件，
  • test 为每个翻译文件生成后缀前加.lang 的文件，以便查看翻译后对照，并输出翻译文件
  • prod 直接替换翻译原文件，用于生成部署(可放在打包命令之前执行)，，并输出翻译文件。

自定义翻译字典

在项目跟目录创建translater.json文件，添加自定义翻译对照，遇到包含中文则会使用指定的 key 作为键 如：

{
    "com_yes": "是",
    "com_no": "否",
    "com_success": "成功",
    "com_fail": "失败",
    "com_enable": "启用",
    "com_disable": "禁用",
    "com_confirm": "确定",
    "com_cancel": "取消",
    "com_add": "新增",
    "com_edit": "编辑",
    "com_modify": "修改",
    "com_delete": "删除",
    "com_save": "保存",
    "com_handle": "操作",
    "com_action": "操作",
    "com_add_success": "新增成功",
    "com_edit_success": "编辑成功",
    "com_modify_success": "修改成功",
    "com_delete_success": "删除成功",
    "com_save_success": "保存成功",
    "com_handle_success": "操作成功",
    "com_query": "查询",
    "com_close": "关闭",
    "com_reset": "重置",
    "com_back": "返回",
    "com_reminder": "提示",
    "com_copy": "拷贝",
    "com_export": "导出",
    "com_detail": "查看",
    "com_details": "详情",
    "com_lookup": "查找",
    "com_set": "设置",
    "com_all": "全部",
    "com_sel_all": "全选",
    "com_clear": "清空",
    "com_finish": "完成",
    "com_no_data": "暂无数据",
    "com_more_action": "更多操作",
    "com_please_select": "请选择",
    "com_please_input": "请输入",
    "com_required": "必填项",
    "com_prev_step": "上一步",
    "com_next_step": "上一步",
    "com_rules_length_max": "长度最长{max}个字符",
    "com_rules_length_range": "长度在{min}到{max}个字符"
  }
  

备注：适用于高频率出现需要的翻译的中文，防止生成过多重复多语言，因为默认 key 为文件名_[中文拼音](中文拼音做了一些处理)，所以不同文件相同中文会生成不同的 key。

执行翻译

全局安装

translater --help  // 帮助文档

translater dev --dir src --suffix .vue --excludes test.vue app.vue -o locals/local.json --strict  // 执行翻译

本地安装 （在项目package.json中添加）

  "scripts": {
    "translater": "translater dev -dir src -suffix .vue",
    "translater:test": "translater test --dir src --suffix .vue --strict",
    "translater:prod": "translater prod --dir src --suffix .vue --strict"
  },

测试文件

带插槽推荐使用字符串模板(`)写法

test.vue

<template>
  <div>
    <p>{{ $t('test') }}</p>
    <div>这是提个中文</div>
    <p>{{ $t('确定') }}</p>
    <p>{{ $t("取消") }}</p>
    <p>{{ $t('取消and不取消') }}</p>
    <p>{{ $t('{msg}成功', { msg: '用户' }) }}</p>
    <p>{{ $t('请求{msg}成功', { msg: '用户' }) }}</p>
    <p>{{ $t('{0}成功{1}', ['a', 'b'] ) }}</p>
    <el-form-item :label="$t('密码')+':'">
      <el-input :maxlength="6" :placeholder="$t('请输入密码')"></el-input>
    </el-form-item>
  </div>
</template>

<script>
export default {
  computed: {
    weekday() {
      return this.$t('星期日');
    },
    timeDay() {
      return this.$t('早上好');
    },
  },
  methods: {
    onExport: function () {
      const test1 = '这是一个中文';
      const test2 = this.$t('初始日期');
      const test3 = this.$t('kpi结束时间');
    }
  }
};
</script>

测试结果（严格模式）

<template>
  <div>
    <p>{{ $t('test') }}</p>
    <div>这是提个中文</div>
    <p>{{ $t('com_confirm') }}</p>
    <p>{{ $t("com_cancel") }}</p>
    <p>{{ $t('test_qu_xiaoandbu_qu_xiao') }}</p>
    <p>{{ $t('test_xxxcheng_gong', { msg: '用户' }) }}</p>
    <p>{{ $t('test_qqxxxcg', { msg: '用户' }) }}</p>
    <p>{{ $t('test_xxxcheng_gongxxx', ['a', 'b'] ) }}</p>
    <el-form-item :label="$t('test_mi_ma')+':'">
      <el-input :maxlength="6" :placeholder="$t('test_qing_shu_ru_mi_ma')"></el-input>
    </el-form-item>
  </div>
</template>

<script>
export default {
  computed: {
    weekday() {
      return this.$t('test_xing_qi_ri');
    },
    timeDay() {
      return this.$t('test_zao_shang_hao');
    },
  },
  methods: {
    onExport: function () {
      const test1 = '这是一个中文';
      const test2 = this.$t('test_chu_shi_ri_qi');
      const test3 = this.$t('test_kpijie_shu_shi_jian');
    }
  }
};
</script>

注意事项

1.需翻译的文本父标签不能包含其他标签,否则将被忽略

<div>
  测试文本
  <h1>test</h1>
</div>

正确写法

<div>
  <span>测试文本</span>
  <h1>test</h1>
</div>

2.需翻译的文本标签不能包含文本插值 (双大括号) ,否则将被忽略

<div>
  <span>测试文本{{ userName }}</span>
</div>

正确写法

<div>
  <span>{{ `测试文本${userName}` }}</span>
</div>