我要评论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 functioncomponents4、在类组件中使用国际化-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到此这篇关于react umi国际化配置的文章就介绍到这了,更多相关react umi国际化内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论