umi 国际化

最新推荐文章于 2024-10-17 09:10:13 发布

「已注销」

最新推荐文章于 2024-10-17 09:10:13 发布

阅读量1.6k

点赞数

分类专栏： react

本文链接：https://blog.youkuaiyun.com/qq_36258899/article/details/113805528

版权

react 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在基于Umi的项目中实现国际化功能。通过umi-plugin-locale插件，需要在src/locales目录下创建对应语言的js文件，如en-US.js和zh-CN.js，并在项目配置中设置。umi-plugin-locale封装了react-intl，提供了formatMessage、setLocale、getLocale等API，使得使用更加便捷。文中给出了示例代码展示如何在组件中切换和显示不同语言的文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

 在做项目过程中，遇到一个需求就是支持多语言，实现国际化的功能。感谢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 {
‘navbar.lang’: ‘English’,
}
我们就可以在组件中这样使用

import { formatMessage } from ‘umi/locale’;

export default () => {
return

{formatMessage({ id: ‘navbar.lang’ })}

;
};
设置区域#
umi-plugin-locale 暴露了名为 setLocale 和 getLocale 的 api，通过这两个 api 可以方便的切换区域。

代码看起来像这样的：

…
changLang = () => {
const locale = getLocale();
if (!locale || locale === ‘zh-CN’) {
setLocale(‘en-US’);
} else {
setLocale(‘zh-CN’);
}
};
render(){
<Button
size=“small”
ghost={theme === ‘dark’}
style={{
margin: ‘0 8px’,
}}
onClick={() => {
this.changLang();
}}
>

}
一个简单的demo：

 https://github.com/lghxuelang/localeLange.git