国际化
He3 支持 11 种主流的国际语言,工具国际化是可选的,它分为两种类型:
- 工具元信息国际化
- 业务提示国际化
工具元信息国际化
He3 支持生成工具的国际化元信息,即生成 meta.locale.json
文件;用于底座渲染以及使用国际化信息。
1. 修改 package.json
中工具元信息
json
{
...,
"he3": {
...,
// 工具名
"name": "test name",
// 简介
"description": "test description",
// 关键字
"keywords": [
"test"
]
},
}
2. 执行 npm run i18n
执行该命令后会根据 package.json
中的数据生成 meta.locale.json
文件,并用于调试(npm run dev
)与发版 (npm run publish
)。
meta.locale.json
文件:
json
{
"en": {
"$name": "test name",
"$description": "test description",
"$keywords": [
"test"
]
},
"zh-cn": {
"$name": "测试名",
"$description": "测试简介",
"$keywords": [
"测试"
]
},
"ru": {
...
},
"zh-tw": {
...
},
"pt": {
...
},
"fr": {
...
},
"it": {
...
},
"ja": {
...
},
"ko": {
...
},
"de": {
...
},
"es": {
...
}
}
可通过手动修改
meta.locale.json
文件,更新底座渲染的工具名与工具详情。 > 没有meta.locale.json
文件的工具会自动使用package.json
中的元信息。
业务提示国际化
业务提示国际化是指在业务中使用到的按钮、输入框提示、弹出提示等,你需要在工具 src 目录下手动创建 lang.json 文件。
json
{
"zh": {
"key": "值"
},
"en": {
"key": "value"
},
"de": {
...
},
"es": {
...
},
"fr": {
...
},
"it": {
...
},
"ja": {
...
},
"ko": {
...
},
"pt": {
...
},
"ru": {
...
},
"zh-tw": {
...
}
}
更多信息请参考示例应用的 lang.json 文件。
lang.json
文件创建完成后,就可以在 vue 文件中通过内置变量 $t('key')
访问它们,He3 会根据用户选择的语言来展示对应的国际化信息。
<div>
<h-multiline-input
v-model="input"
auto-select
:title="$t('input')"
@change="encode" />
</div>
更多信息请参考示例应用 index.vue 文件。