translate-compiler

translate-compiler

介绍

Vue 翻译编译器，用于自动提取项目(.vue)文件中的”中文“并替换为多语言($t(key))，并导出全部翻译到指定文件。

安装

npm install translate-compiler --save-dev [-g]

命令行参数

translate <env>  options

Arguments:
  env                       指定环境,默认:dev

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

• env参数详解：

  • dev 仅导出翻译输出文件，(同时会清理test生成的 前缀加.lang文件)。
  • test 生成每个翻译文件后缀前加.lang的新文件，以便查看翻译后对照，并导出翻译输出文件。
  • prod 翻译直接替换原文件，用于生产打包部署前命令，并导出翻译输出文件。

  注意：test生成的文件后缀前加.lang的新文件，可执行 dev/prod 删除。

自定义翻译字典

在根目录创建translate.json文件，添加自定义翻译对照，内包含的中文则会使用指定的 key 作为键，适用于项目高频率出现的中文，防止生成过多重复多语言，如下（默认 key 为文件名_[处理过的中文拼音]，所以不同文件相同中文会生成不同的 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}个字符"
}

执行翻译

全局安装

帮助文档

translate --help

执行翻译

translate dev --dir src --excludes app.vue -o locals/local.json --strict

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

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

注意事项

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

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

正确写法

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

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

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

正确写法

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