globalization

Add language

Take Japanese as an example.

1. Add a language pack local file, ja is the Japanese language code, and a list of languages ​​that support translation 有道智云, the src/locales/ja/messages.json file will be generated after running the following command.

   npm run add-locale ja
   

2. Extract the fields in the code that need to be translated, ie <Trans>?message</Trans>, t`message in the message field, run the following command after src/locales/ja /messages.json will appear after the extracted field configuration.

   npm run extract
   

   You will see the following information:

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

3. At the same time, we have added the relevant configuration in src/utils/config.js.

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

   Routing related effects, after the configuration npm run start takes effect after restart.

4. Use the built-in commands for automatic translation. You will see the translated configuration in src/locales/ja/messages.json.

   npm run trans:only
   

   You will see the following information:

   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 will execute npm run extract and npm run trans:only in order.

5. Finally, you can adjust the inaccurate fields in src/locales/ja/messages.json. Start the development mode npm run start, open http://localhost:7000/ja/login and you will see the Japanese version of the app.