国际化

新增应用语言

以新增日语为例。

i18n

  1. 添加语言包本地文件，ja 为日语的语言代码，支持翻译的语言列表参考 有道智云，运行下面命令后会生成 src/locales/ja/messages.json 文件。

    1. npm run add-locale ja

  2. 提取代码中需要翻译的字段，即 <Trans>message</Trans>、i18n.t`message 中 message 字段，运行下面命令后 src/locales/ja/messages.json 将会出现提取后的字段配置。

    1. npm run extract

    你将看到如下信息：

    1.  Catalog statistics:
    2.  ┌─────────────┬─────────────┬─────────┐
    3.  │ Language    │ Total count │ Missing │
    4.  ├─────────────┼─────────────┼─────────┤
    5.  │ en (source) │     52      │    -    │
    6.  │ ja          │     52      │   52    │
    7.  │ zh          │     52      │    0    │
    8.  └─────────────┴─────────────┴─────────┘

  3. 与此同时，我们在 src/utils/config.js 新增相关配置。

    1. {
    2.     ...
    3.     i18n: {
    4.         languages: [
    5.             ...
    6.             {
    7.                 key:'ja',
    8.                 title: '日本語',
    9.                 flag: '/japanese.svg',
    10.             },
    11.         ],
    12.     },
    13. }

     路由相关效果，配置后 npm run start 重启后生效。

  4. 使用内置的命令进行自动翻译，在 src/locales/ja/messages.json 中将会看到翻译后的配置。

    1. npm run trans:only

    你将看到如下信息：

    1. start: en -> ja
    2. ...
    3. youdao: en -> ja: Unpublished -> 未発表
    4. youdao: en -> ja: Update -> 更新
    5. youdao: en -> ja: Update User -> ユーザーの更新
    6. youdao: en -> ja: Username -> 名
    7. ...
    8. All translations have been completed.

    npm run trans 将会依次执行 npm run extract 和 npm run trans:only

  5. 最后，可以在 src/locales/ja/messages.json 中对翻译不准确的的字段进行调整。启动开发模式 npm run start，打开 http://localhost:7000/ja/login，你将看到日语版本的应用。