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 的文件，以便查看翻译后对照，并输出翻译文件
  • 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>