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/