react+antd+umi實作國際化語言

1、配置：

  .umirc.js檔案(如果已經存在，則增加locale配置)

['umi-plugin-react', {

dva: true,

antd: true, // antd 預設不開啟，如有使用需自行配置

hardSource: true,

locale: {

enable: true, // default false

default: 'zh-CN', // default zh-CN

baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default

},

........

}
           

2.、目錄及約定：src/pages/

根據業務需要增加各語言檔案夾下的檔案，每個語言包下的檔案名和内容id應該一緻，确切換語言時能通用

3、在src/components/檔案夾下新增這兩個檔案夾，其中SelectLang，裡面是定義的需要在頁面上展示的語言選擇内容。

4.引用切換按鈕:

import SelectLang from '@/components/SelectLang';

 <div className={styles.lang}>
     <SelectLang />
  </div> 
           

需要注意的是，如果儲存之後或者啟動的時候控制台提示：

需要用指令：yarn add umi-plugin-react

成功之後，可能有些工程會記憶體溢出再加入：（這邊是用umi.cmd）

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe" --max_old_space_size=8192 "%~dp0\..\umi\bin\umi.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  --max_old_space_size=8192 "%~dp0\..\umi\bin\umi.js" %*
)
           

5、根據實際業務需要，在元件中或者提示語句中引用：

import { formatMessage } from 'umi-plugin-react/locale';

。。。。。。
 {formatMessage({ id: 'app.system.name' })} 
           

可以參考開源工程：

https://github.com/ant-design/ant-design-pro/