Skip to content
On this page

国际化

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 文件。