国际化

新增应用语言

以新增日语为例。

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

   npm run add-locale ja
   

2. 提取代码中需要翻译的字段，即 <Trans>message</Trans>、intl.formatMessage({ id: 'message 中 message 字段，运行下面命令后 `src/locales/ja/messages.json' }) 将会出现提取后的字段配置。

   npm run extract
   

   你将看到如下信息：

    Catalog statistics:
    ┌─────────────┬─────────────┬─────────┐
    │ Language    │ Total count │ Missing │
    ├─────────────┼─────────────┼─────────┤
    │ en (source) │     52      │    -    │
    │ ja          │     52      │   52    │
    │ zh          │     52      │    0    │
    └─────────────┴─────────────┴─────────┘
   

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

   {
       ...
       i18n: {
           languages: [
               ...
               {
                   key:'ja',
                   title: '日本語',
                   flag: '/japanese.svg',
               },
           ],
       },
   }
   

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

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

   npm run trans:only
   

   你将看到如下信息：

   start: en -> ja
   ...
   youdao: en -> ja: Unpublished -> 未発表
   youdao: en -> ja: Update -> 更新
   youdao: en -> ja: Update User -> ユーザーの更新
   youdao: en -> ja: Username -> 名
   ...
   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，你将看到日语版本的应用。