Umi3.5国际化

芋圆社区 > 编程 > UmiJS > Umi3.5国际化

837

2023-08-31

2023-09-01

Hey、小怪兽

• 版本：Umi：3.5.0，Antd：5.8.5
• 这里同时介绍Umi和Antd的国际化，首先先解决Antd的国际化，用ConfigProvider全局配置就可以了
• 在最外层的index.js引入语言包：

import en_US from 'antd/locale/en_US';
import zh_CN from 'antd/locale/zh_CN';

• 定义变量：

// 国际化
const [antdLocale, setAntdLocale] = useState(zh_CN);

• 用ConfigProvider包裹dom元素最外层：

<ConfigProvider locale={antdLocale}>
  ...其他元素
</ConfigProvider>

• 引入翻译的图标：

import { TranslationOutlined } from '@ant-design/icons';

• 写个控制全局化变量的按钮：

<FloatButton icon={<TranslationOutlined />} onClick={changeLocale} />

• 写上changeLocale的方法：

/** 国际化按钮切换语言的方法 */
const changeLocale = () => {
  if (antdLocale === zh_CN) {
    setAntdLocale(en_US);
  } else {
    setAntdLocale(zh_CN);
  }
}

• 随便点开一个弹窗，按钮还是中文的：
• 点击翻译的按钮：
• 已经翻译成英文了：
• 其他的文本可以用Umi的插件@umijs/plugin-locale，在.umirc.js配置，如果用了config文件夹就在config里面配置（这个antd开不开无所谓吧，因为我没用Umi的Antd）：

locale: {
  default: 'zh-CN', // 默认的语言
  antd: true, // antd是否也支持国际化
  title: true, // 页面标题是否支持国际化
  baseNavigator: true, // 开启浏览器语言检测
},

• 还是在之前的index.js引入两个方法，一个是获取当前的语言，一个是设置当前的语言：

import { getLocale, setLocale } from 'umi';

• 放在翻译的按钮上，控制台会打印zh-CN：
```
console.log(getLocale())
```
• 之前的方法就可以加一个设置语言的方法：

/** 国际化按钮切换语言的方法 */
const changeLocale = () => {
  if (antdLocale === zh_CN) {
    setAntdLocale(en_US);
  } else {
    setAntdLocale(zh_CN);
  }
  if (getLocale() === 'zh-CN') {
    setLocale('en-US', false);
  } else {
    setLocale('zh-CN', false);
  }
}

• setLocale第二个参数是false就是不刷新页面：
• 其实不需要判断当前的语言，因为组件和页面的语言都是统一的，要么一起中文，一起英文，所以就可以直接改成：

/** 国际化按钮切换语言的方法 */
const changeLocale = () => {
  if (antdLocale === zh_CN) {
    setAntdLocale(en_US);
    setLocale('en-US', false);
  } else {
    setAntdLocale(zh_CN);
    setLocale('zh-CN', false);
  }
};

• 简单修改一个这样的抽屉：
• 需要自己弄翻译的语言包，在项目的src下创建locales文件夹
• 英语文件夹en-US，中文文件夹zh-CN，这两个里面有很多文件夹，这些文件夹都是项目的模块，外面en-US.js，zh-CN.js这个是主要用来导出的：
• 项目里重置密码的抽屉是在system模块里，所以增加/locales/en-US/system/system.js：

const resetPasswordDrawer = {
  'system_resetPasswordDrawer_drawerTitle': 'Reset Password',
  'system_resetPasswordDrawer_account': 'Login Account',
  'system_resetPasswordDrawer_accountPlaceholder': 'Please enter your login account',
  'system_resetPasswordDrawer_originalPassword': 'Original Password',
  'system_resetPasswordDrawer_originalPasswordPlaceholder': 'Please enter your original password',
  'system_resetPasswordDrawer_newPassword': 'New Password',
  'system_resetPasswordDrawer_newPasswordPlaceholder': 'Please enter your new password',
  'system_resetPasswordDrawer_passwordAgain': 'Confirm Password',
  'system_resetPasswordDrawer_passwordAgainPlaceholder': 'Please enter the new password again',
  // 密码规则，三个输入框都可以共用
  'system_resetPasswordDrawer_passwordPattern': 'The password should be no less than 8 digits, Must contain uppercase and lowercase letters, numbers, and special characters!',
}

export default Object.assign({}, resetPasswordDrawer);

• /locales/zh-CN/system/system.js增加：

const resetPasswordDrawer = {
  'system_resetPasswordDrawer_drawerTitle': '重置密码',
  'system_resetPasswordDrawer_account': '登录账号',
  'system_resetPasswordDrawer_accountPlaceholder': '请输入登录账号',
  'system_resetPasswordDrawer_originalPassword': '原始密码',
  'system_resetPasswordDrawer_originalPasswordPlaceholder': '请输入原始密码',
  'system_resetPasswordDrawer_newPassword': '新密码',
  'system_resetPasswordDrawer_newPasswordPlaceholder': '请输入新密码',
  'system_resetPasswordDrawer_passwordAgain': '确认密码',
  'system_resetPasswordDrawer_passwordAgainPlaceholder': '请再次输入新密码',
  // 密码规则，三个输入框都可以共用
  'system_resetPasswordDrawer_passwordPattern': '密码不少于8位, 须包含大小写字母, 数字和特殊字符',
}

export default Object.assign({}, resetPasswordDrawer);

• 可以看出在定义翻译文本的时候，遵循这样的规则：

/**
 * const 模块里的组件名 = {
 *   '模块名_组件名_子组件名': '对应翻译',
 *   .......
 * }
 * export default Object.assign({}, 模块里的组件名, 模块里的组件名, ...);
 */

• 外面的/locales/en-US.js和/locales/zh-CN.js：

import homepage from './en-US/homepage/homepage';
import system from './en-US/system/system';

export default {
  ...homepage,
  ...system,
}

import homepage from './zh-CN/homepage/homepage';
import system from './zh-CN/system/system';

export default {
  ...homepage,
  ...system,
}

• 最后在system模块的抽屉里使用，引入和初始化：

import { useIntl } from 'umi';

const intl = useIntl();

• 随便举个账号为例子，用法就是用intl的formatMessage：

<Form.Item
  id="drawer-account"
  name="account"
  label={intl.formatMessage({ id: 'system_resetPasswordDrawer_account' })}
  rules={[
    {
      required: true,
      message: `${intl.formatMessage({
        id: 'system_resetPasswordDrawer_accountPlaceholder',
      })}!`,
    },
  ]}
>
  <Input
    id="drawer-account-input"
    placeholder={intl.formatMessage({
      id: 'system_resetPasswordDrawer_accountPlaceholder',
    })}
    allowClear
    autoComplete="off"
  />
</Form.Item>

• 等整个重置密码的抽屉都替换成了用intl的formatMessage，点击翻译按钮，可以看到完美的翻译了：
• 假如说这些翻译的文本不是写死在前端的文件里，而是需要后台数据库管理起来，需要请求接口获取文本的话，可以在首页请求接口，用addLocale方法，这个方法刷新后添加的语言就失效了，所以可以存入localStorage里，再次添加，例：

/** 接口获取国际化的数据 */
const getI18nData = () => {
  // 这里后期要改成接口的形式
  const zhCN_data = {
    login_loginCard_inputAccount: '请输入用户名',
    login_loginCard_inputAccountValidate: '请输入用户名!',
    login_loginCard_inputPassword: '请输入密码',
    login_loginCard_inputPasswordValidate: '请输入密码!',
    login_loginCard_inputCode: '验证码',
    login_loginCard_inputCodeValidate: '请输入验证码!',
    login_loginCard_loginButtonText: '登录',
  };
  const enUS_data = {
    login_loginCard_inputAccount: 'Enter one user name',
    login_loginCard_inputAccountValidate: 'Enter one user name!',
    login_loginCard_inputPassword: 'Please enter the password',
    login_loginCard_inputPasswordValidate: 'Please enter the password!',
    login_loginCard_inputCode: 'Verification code',
    login_loginCard_inputCodeValidate: 'Please enter the verification code!',
    login_loginCard_loginButtonText: 'Log On',
  };

  localStorage.setItem('zh-CN', JSON.stringify(zhCN_data));
  localStorage.setItem('en-US', JSON.stringify(enUS_data));
  addLocale('zh-CN', zhCN_data);
  addLocale('en-US', enUS_data);
  localStorage.setItem('currentLang', 'zh-CN');
};

上一篇：Umi2.0直接引用样式文件问题

下一篇：Umi3.5用Helmet

Umi3.5国际化

回复