Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
translate-compiler
Advanced tools
Vue翻译编译器,用于自动提取项目(.vue)文件中的”中文“并替换为多语言($t(key)),并导出全部翻译到指定文件。
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
参数详解:
.lang
的新文件,以便查看翻译后对照,并导出翻译文件。注意: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_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": "长度最长{0}个字符",
"com_rules_length_range": "长度在{0}到{1}个字符"
}
帮助文档
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"
},
<div>
测试文本
<h1>test</h1>
</div>
正确写法
<div>
<span>测试文本</span>
<h1>test</h1>
</div>
test.vue
<template>
<div>
<!-- 严格模式 -->
<div>
<p>{{ $t('使用') }}</p>
<p>{{ isOk ? $t('确定') : $t('取消') }}</p>
<p>{{ $t('清洁时长(min)') }}</p>
<p>{{ $t('密码8-16位,必须包含数字、符号、字母任意两种') }}</p>
</div>
<div>
<el-form-item :label="$t('用户名')"></el-form-item>
<el-input :placeholder="$t('请输入')"></el-input>
</div>
<div>
<p>{{ $t(`最多上传${limit}个文件`) }}</p>
<p>{{ $t(`最多上传${limit ? '0' : '1个'}个文件`) }}</p>
<p>{{ $t(`您确定要删除${user}的${num}个文件吗?`) }}</p>
<el-form-item :label="$t(`${platform}账号:`)"></el-form-item>
<el-form-item :label="$t(`${platform ? '谷歌' : '微信'}账号:`)"></el-form-item>
</div>
<!-- 非严格模式 -->
<div>
<p>基础信息</p>
<p>新增成功</p>
<p>长度要在7~13个字符</p>
<p>机身号、项目名称or设备名称</p>
<p>测试文本{{ userName }}</p>
<p>开始{{ isOk ? '篮球' : '兵乒球' }}比赛</p>
</div>
<div>
<el-form-item label="持卡人"></el-form-item>
<el-input per-label="权限" placeholder="请输入"></el-input>
</div>
<div>
<p>{{ '使用记录' }}</p>
<p>{{ isOk ? '使用记录' : '历史记录' }}</p>
<p>{{ isOk ? '开始' : `结束` }}</p>
<p>{{ `员工姓名` }}</p>
<p>{{ `确定要删除${type ? '自动清洗' : '手动清洗'}路线吗` }}</p>
<p>{{ `您确定要选择${type}路线${state}吗` }}</p>
<el-form-item :label="`${area}负责人`"></el-form-item>
</div>
<!-- 错误写法示例1 -->
<div>
测试文本
<h1>test</h1>
</div>
</div>
</template>
<script>
export default {
computed: {
weekday() {
return this.$t('星期日');
},
timeDay() {
return '早上好';
}
},
methods: {
onTable: function () {
const test11 = this.$t('初始日期');
const test22 = this.$t('kpi结束时间');
const test33 = this.$t(`kpi结束${this.label}`);
const test44 = this.$t(`标签名称${this.label == 'today' ? '王' : '二'}`);
},
onExport: function () {
const t1 = '转账信息';
const t2 = 'pary时间';
const t3 = `标签名称${this.timeDay == 'today' ? '李' : '林'}`;
const t4 = `这是(${this.user})的账号`;
const t5 = `${this.timeDay},${this.user}先生`;
}
}
};
</script>
执行结果
<template>
<div>
<div>
<p>{{ $t('test_shi_yong') }}</p>
<p>{{ isOk ? $t('com_confirm') : $t('com_cancel') }}</p>
<p>{{ $t('test_qjscmin') }}</p>
<p>{{ $t('test_mm816wbxbhszfhzmrylz') }}</p>
</div>
<div>
<el-form-item :label="$t('test_yong_hu_ming')"></el-form-item>
<el-input :placeholder="$t('com_please_input')"></el-input>
</div>
<div>
<p>{{ $t('test_zdscogwj', [limit]) }}</p>
<p>{{ $t('test_zdscogwj', [limit ? '0' : $t('test_1ge')]) }}</p>
<p>{{ $t('test_nqdyscodogwjm', [user, num]) }}</p>
<el-form-item :label="$t('test_ozhang_hao', [platform])"></el-form-item>
<el-form-item :label="$t('test_ozhang_hao', [platform ? $t('test_gu_ge') : $t('test_wei_xin')])"></el-form-item>
</div>
<div>
<p>{{ $t('test_ji_chu_xin_xi') }}</p>
<p>{{ $t('com_add_success') }}</p>
<p>{{ $t('test_cdyz713gzf') }}</p>
<p>{{ $t('test_jshxmmcorsbmc') }}</p>
<p>{{ $t('test_ce_shi_wen_ben') }}{{ userName }}</p>
<p>{{ $t('test_kai_shi') }}{{ isOk ? $t('test_lan_qiu') : $t('test_bing_ping_qiu') }}{{ $t('test_bi_sai') }}</p>
</div>
<div>
<el-form-item :label="$t('test_chi_ka_ren')"></el-form-item>
<el-input :per-label="$t('test_quan_xian')" :placeholder="$t('com_please_input')"></el-input>
</div>
<div>
<p>{{ $t('test_shi_yong_ji_lu') }}</p>
<p>{{ isOk ? $t('test_shi_yong_ji_lu') : $t('test_li_shi_ji_lu') }}</p>
<p>{{ isOk ? $t('test_kai_shi') : $t('test_jie_shu') }}</p>
<p>{{ $t('test_yuan_gong_xing_ming') }}</p>
<p>{{ $t('test_qdyscolxm', [type ? $t('test_zi_dong_qing_xi') : $t('test_shou_dong_qing_xi')]) }}</p>
<p>{{ $t('test_nqdyxzolxom', [type, state]) }}</p>
<el-form-item :label="$t('test_ofu_ze_ren', [area])"></el-form-item>
</div>
<div>
测试文本
<h1>test</h1>
</div>
</div>
</template>
<script>
export default {
computed: {
weekday() {
return this.$t('test_xing_qi_ri');
},
timeDay() {
return this.$t('test_zao_shang_hao');
}
},
methods: {
onTable: function () {
const test11 = this.$t('test_chu_shi_ri_qi');
const test22 = this.$t('test_kpijie_shu_shi_jian');
const test33 = this.$t('test_kpijie_shuo', [this.label]);
const test44 = this.$t('test_bqmco', [this.label == 'today' ? this.$t('test_wang') : this.$t('test_er')]);
},
onExport: function () {
const t1 = this.$t('test_zhuan_zhang_xin_xi');
const t2 = this.$t('test_paryshi_jian');
const t3 = this.$t('test_bqmco', [this.timeDay == 'today' ? this.$t('test_li') : this.$t('test_lin')]);
const t4 = this.$t('test_zhe_shiode_zhang_hao', [this.user]);
const t5 = this.$t('test_ooxian_sheng', [this.timeDay, this.user]);
}
}
};
</script>
翻译文件 (locals.json)
{
"test_shi_yong": "使用",
"com_confirm": "确定",
"com_cancel": "取消",
"test_qjscmin": "清洁时长(min)",
"test_mm816wbxbhszfhzmrylz": "密码8-16位,必须包含数字、符号、字母任意两种",
"test_yong_hu_ming": "用户名",
"com_please_input": "请输入",
"test_xing_qi_ri": "星期日",
"test_chu_shi_ri_qi": "初始日期",
"test_kpijie_shu_shi_jian": "kpi结束时间",
"test_zdscogwj": "最多上传{0}个文件",
"test_1ge": "1个",
"test_nqdyscodogwjm": "您确定要删除{0}的{1}个文件吗?",
"test_ozhang_hao": "{0}账号:",
"test_gu_ge": "谷歌",
"test_wei_xin": "微信",
"test_jie_shu": "结束",
"test_yuan_gong_xing_ming": "员工姓名",
"test_zi_dong_qing_xi": "自动清洗",
"test_shou_dong_qing_xi": "手动清洗",
"test_qdyscolxm": "确定要删除{0}路线吗",
"test_nqdyxzolxom": "您确定要选择{0}路线{1}吗",
"test_ofu_ze_ren": "{0}负责人",
"test_ji_chu_xin_xi": "基础信息",
"com_add_success": "新增成功",
"test_cdyz713gzf": "长度要在7~13个字符",
"test_jshxmmcorsbmc": "机身号、项目名称or设备名称",
"test_ce_shi_wen_ben": "测试文本",
"test_kai_shi": "开始",
"test_bi_sai": "比赛",
"test_lan_qiu": "篮球",
"test_bing_ping_qiu": "兵乒球",
"test_shi_yong_ji_lu": "使用记录",
"test_li_shi_ji_lu": "历史记录",
"test_chi_ka_ren": "持卡人",
"test_quan_xian": "权限",
"test_kpijie_shuo": "kpi结束{0}",
"test_wang": "王",
"test_er": "二",
"test_bqmco": "标签名称{0}",
"test_li": "李",
"test_lin": "林",
"test_zhe_shiode_zhang_hao": "这是({0})的账号",
"test_ooxian_sheng": "{0},{1}先生",
"test_zao_shang_hao": "早上好",
"test_zhuan_zhang_xin_xi": "转账信息",
"test_paryshi_jian": "pary时间"
}
FAQs
Vue 国际化i18n编译器,自动提取项目(.vue)文件中的”中文“并替换为多语言($t(key)),并导出全部翻译到指定文件。
We found that translate-compiler demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.