国际化

新增应用语言

以新增日语为例。

i18n

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

    npm run add-locale ja
    
  2. 提取代码中需要翻译的字段,即 <Trans>message</Trans>intl.formatMessage({ id: 'messagemessage 字段,运行下面命令后 `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 extractnpm run trans:only

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