Umi 3 项目中实现多语言功能完整详细教程

Umi 3 提供了 @umijs/plugin-locale 插件，可以便捷的实现国际化（i18n），帮助开发者轻松实现多语言功能。本文将详细介绍如何在 Umi 3 项目中实现页面多语言。

在 Umi 3 项目中实现多语言功能，可通过以下步骤完成：

1. 安装国际化插件

使用 Umi 官方提供的 @umijs/plugin-locale 插件，支持多语言切换与资源管理。

npm install @umijs/plugin-locale --save

2. 配置语言文件

在项目根目录创建 src/locales 文件夹，按语言代码（如 zh-CN、en-US）命名 JSON 文件，例如：src/locales/zh-CN.js 、src/locales/en-US.js

文件内容示例（键值对形式）：

// zh-CN.js
export default {
  'welcome': '欢迎',
  'button.submit': '提交'
};

// en-US.js
export default {
  'welcome': 'Welcome',
  'button.submit': 'Submit'
};

3. 启用插件配置

在 config/config.js 中添加插件配置：

export default {
  plugins: ['@umijs/plugin-locale'],
  locale: {
    default: 'zh-CN', // 默认语言
    baseNavigator: true, // 根据浏览器语言自动切换
    antd: true // 若使用 Ant Design，需开启此项
  }
};

4. 在组件中使用多语言

通过 useIntl Hook 或 formatMessage API 调用语言资源：

import { useIntl } from 'umi';

function Demo() {
  const intl = useIntl();
  return (
    <div>
      {intl.formatMessage({ id: 'welcome' })}
      <button>{intl.formatMessage({ id: 'button.submit' })}</button>
    </div>
  );
}

5. 动态切换语言

调用 setLocale 方法实现运行时语言切换：

import { setLocale } from 'umi';

// 切换为英文
setLocale('en-US', false); // 第二个参数表示是否刷新页面

注意事项

若需兼容 Ant Design 组件库的多语言，需额外配置 antd 的国际化资源。

语言文件支持嵌套结构，可通过 'parent.child' 形式组织复杂文案。

虽然 formatMessage 使用起来会非常方便，但是它脱离了 react 的生命周期，最严重的问题就是切换语言时无法触发 dom 重新渲染。为了解决这个问题，我们切换语言时会刷新一下浏览器，用户体验很差，所以推荐大家使用 useIntl 或者 injectIntl，可以实现同样的功能。参考：umi 3 国际化 formatMessage 多场景使用方法。

更多信息，可以参考 Umi 官方国际化文档 调整实现。

未经允许不得转载：前端资源网 - w3h5 » Umi 3 项目中实现多语言功能完整详细教程