umi3使用国际化

umi3官网：https://v3.umijs.org/zh-CN/plugins/plugin-locale

.umirc.ts文件

开启默认配置：

export default {
  locale: {
    default: 'zh-CN',
    antd: false,
    title: false,
    baseNavigator: true,
    baseSeparator: '-',
  },
};

项目src目录下新建目录locales

en-US.js文件

export default {
  WELCOME: 'welcome'
}

zh-CN.js文件

export default {
  WELCOME: '欢迎'
}

utils/common.ts文件

//写法1
import { getIntl} from 'umi';
export const intl = (key) => {
 return getIntl().formatMessage({id:key})
}

utils/common.ts文件

//写法2
import { useIntl} from 'umi';

export const intl = (key) => {
 return useIntl().formatMessage({id:key})
}

应用

import {intl} from '@/utils/commom'

export default function Layout(props) {
  console.log('props', props);

  return (
    <div>
      hello
      <p>
        {intl('WELCOME')}
      </p>
      {props?.children}
    </div>
  )
}

更改默认语言

  locale: {
    default: 'en-US',
    antd: false,
    title: false,
    baseNavigator: true,
    baseSeparator: '-',
  }