react项目国际化需求开发、umi框架开发国际化需求、使用插件做国际化版本

一、项目国际化版本需求背景

react项目要求前端开发的内容做成中英文切换的功能，项目框架是用的umi

二、实现方案

umi有集成国际化插件

@umijs/plugin-locale：国际化插件，用于解决 i18n 问题
umi官网介绍：https://v3.umijs.org/zh-CN/plugins/plugin-locale
步骤：
1、在src目录下新建文件夹locales，新建文件en-US.ts、zh-CN.ts，分别对应值的英文和中文翻译
2、zh-CN.ts文件中

export default {
   
  chinese: '中文',
}

2、en-US.ts文件中

export default {
   
	chinese: 'Chinese',
}

3、在要翻译的文件中引入并使用

import {
    useIntl, setLocale } from 'umi';
const ProtectHome = () => {
   
	const intl = useIntl();
  	const lang = intl.locale;
	const changeLocale