umi 国际化

前言:

 在做项目过程中,遇到一个需求就是支持多语言,实现国际化的功能。感谢React社区的强大,提供了 umi-plugin-locale插件来实现国际化的功能。

首先我们是基于 Umi 搭建的项目。

umi-plugin-locale 约定 在 src/locales 中引入 相应的 js,例如 en-US.js 和 zh-CN.js,

注意:文件名称要和locale的值要对应起来。

并且在项目配置文件中做如下配置:

  locale: {
    enable: true, // default false
    default: 'zh-CN', // default zh-CN
    baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
  },

就可以在代码中使用全球化的功能了。

umi-plugin-locale 封装了react-intl, api 与 react-intl 基本相同,并做了封装使用起来更加方便。全部 api 如下:

import { formatMessage, setLocale, getLocale, FormattedMessage } from ‘umi/locale’;
格式化字符串#
如果我们在 en-US.js 和 zh-CN.js 中分别作了如下配置:

// en-US.js

export default {
‘navbar.lang’: ‘中文’,
}

// zh-CN.js

export default {

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值