Umi 3.x和Antd国际化
【前言】生产任务中需要国际化，百度了umi相关的国际化，出来的都是umi-plugin-request帮助umi插件locale导入，进行国际化使用。而实际上自己亲身经历3.x的版本不需要是用umi-plugin-request。具体使用请往下看。
1、config.ts配置开启umi国际化
具体参考官网
export default defineConfig({
...,
locale: {
default: 'zh-CN',
antd: false,
title: false,
baseNavigator: true,
baseSeparator: '-',
}
})
2、国际化文件配置
在src下创建locales文件，如果项目配置了 singular: true ，locales 要改成 locale
在locales文件下新建zh-CN.ts、en-US.ts文件，并且在文件中做配置
// zh-CN.ts文件
export default{
'project.package.login.hello':'你好！'
}
// en-US.ts文件
export default{
'project.package.login.hello':'Hello Work!'
}
3、在函数组件中使用国际化-useIntl
import {useIntl} from 'umi';
const FunctionComponents = (props:any)=>{
const intl = useIntl();
return (
<>
{intl.formatMessage({id:'project.package.login.hello'})}
</>
)
}
export default FunctionComponents
4、在类组件中使用国际化-injectIntl
import {injectIntl} from 'umi';
class FunctionComponents{
return (
<>
</>
)
}
export default injectInit(FunctionComponents)
5、在ts文件中使用国际化-getIntl
import {getIntl} from 'umi';
export const DataException = {
hello: getIntl().formatMessage({id:'project.package.login.hello'})
}
6、动态设置国际化getLocale、setLocale
// 刷新页面
setLocale('zh-CN', true);
// 不刷新页面
setLocale('zh-CN', false);
console.log(getLocale()); // zh-CN
