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

Umi3.5国际化

796
0
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

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

Umi2.0快速搭建环境

Umi2.0直接引用样式文件问题

Umi3.5国际化

Umi3.5用Helmet

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点