react+antd+umi实现国际化语言

1、配置：

  .umirc.js文件(如果已经存在，则增加locale配置)

['umi-plugin-react', {dva: true,antd: true, // antd 默认不开启，如有使用需自行配置hardSource: true,locale: {enable: true, // default falsedefault: 'zh-CN', // default zh-CNbaseNavigator: 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/