最近接了个大活，一整个管理系统要进行国际化，我勒个去，不得不说，心好累！！！虽然没啥技术含量，但咱不是没有搞过🐴，顺便记录一下，这次的相关内容！

项目框架

umi 2X

不得不吐槽一下，非常old的一个版本，有时间，一定要拉资源给他升个级！！！

怎么做

1. 安装插件

在 Umi 2 中进行国际化，需要使用 Umi 提供的插件 umi-plugin-locale，该插件提供了一种轻松的方式来实现国际化。

需要注意的一点：无需单独引入 umi-plugin-locale 依赖，当你使用 umi-plugin-locale 时，就已经被自动引入了。

当然如果你没有用，那继续！！！

npm install umi-plugin-locale --save-dev

2. 配置插件

2.1没有使用`umi-plugin-react`

export default {
  plugins: [
    ['umi-plugin-locale', options],
  ],
};

其中 options 对象包含以下配置项：

default：默认语言环境，字符串类型，默认值为 'zh-CN'，如果设置了 baseSeparator 选项，则默认值为 'zh_CN'。
baseNavigator：是否使用浏览器提供的语言设置，布尔类型，默认值为 true，当为 true 时，会覆盖 default 的设置。
antd：是否启用 Ant Design 组件库的多语言支持，布尔类型，默认值为 true。
baseSeparator：URL 中语言环境的分隔符，字符串类型，默认值为 '-'，如果设置为 '_'，则 default 默认值为 'zh_CN'。

2.2使用了`umi-plguin-react`

配置项相同，但是要写到umi-plguin-react这个插件的配置下面了

export default {
  plugins: [
    [
      'umi-plugin-react',     
        locale: {},    
    ],
  ],
};

3. 配置语言包

在项目中创建 locales 目录，并在该目录下创建指定的语言相对应的文件，例如 en-US.js 和 zh-CN.js。这些文件将包含你的语言包数据，例如：

export default {
  'app.title': 'My Application',
  'app.home': 'Home',
  'app.about': 'About',
};

4. 使用语言包

4.1 `formatMessage`

在需要国际化的组件中，使用 formatMessage 方法来获取语言包中的文本：

import { formatMessage } from 'umi-plugin-locale';

function MyComponent() {
  return (
    <div>
      <h1>{formatMessage({ id: 'app.title' })}</h1>
      <ul>
        <li>{formatMessage({ id: 'app.home' })}</li>
        <li>{formatMessage({ id: 'app.about' })}</li>
      </ul>
    </div>
  );
}

在这个示例中，formatMessage 方法将根据当前语言从语言包中获取文本。如果当前语言为 en-US，则将显示 My Application、Home 和 About。如果当前语言为 zh-CN，则将显示 我的应用程序、首页 和 关于。

4.2.1 使用 React组件实现国际化

除了使用 formatMessage 方法之外，你还可以使用 React 组件来实现国际化。在语言包中，你可以为每个语言定义一个组件：

export default {
  'app.title': 'My Application',
  'app.home': 'Home',
  'app.about': 'About',
  'app.welcome': {
    'en-US': 'Welcome to my application',
    'zh-CN': '欢迎来到我的应用程序',
  },
};

然后，在你的组件中使用 LocaleProvider 组件来包装你的组件，并使用 FormattedMessage 组件来获取语言包中的文本：

import { LocaleProvider, FormattedMessage } from 'umi-plugin-locale';

function WelcomeMessage() {
  return (
    <div>
      <FormattedMessage id="app.welcome" />
    </div>
  );
}

function MyComponent() {
  return (
    <div>
      <h1>
        <FormattedMessage id="app.title" />
      </h1>
      <ul>
        <li>
          <FormattedMessage id="app.home" />
        </li>
        <li>
          <FormattedMessage id="app.about" />
        </li>
      </ul>
      <LocaleProvider locale={this.props.locale}>
        <WelcomeMessage />
      </LocaleProvider>
    </div>
  );
}

在这个示例中，FormattedMessage 组件将根据当前语言从语言包中获取文本。如果当前语言为 en-US，则将显示 Welcome to my application。如果当前语言为 zh-CN，则将显示 欢迎来到我的应用程序。

注意：在开发中本来和老大规定，全部使用formatMessage这一种方式进行国际化开发，结果在发现对纯常量文件进行国际化时，发现会失效，打开控制台会出现国际化还没有初始化的警告⚠️，这种情况下，还是要使用组件的形式，进行国际化。

5. 切换语言

使用 setLocale 方法来切换语言。例如，你可以在应用程序的某个组件中创建一个下拉菜单，使用户可以选择语言：

import { setLocale } from 'umi-plugin-locale';

function LanguageSelector() {
  function handleLanguageChange(event) {
    setLocale(event.target.value);
  }

  return (
    <select onChange={handleLanguageChange}>
      <option value="en-US">English</option>
      <option value="zh-CN">中文</option>
    </select>
  );
}

在这个示例中，setLocale 方法将根据用户选择的值来切换语言。

6. 使用URL参数设置语言

你还可以使用 URL 参数来设置语言。在路由配置中，将 locale 作为参数添加到路由路径中：

export default [
  {
    path: '/',
    component: './index',
    Routes: ['./routes/Authorized'],
    routes: [
      { path: '/login', component: './login' },
      { path: '/dashboard', component: './dashboard' },
      { path: '/profile', component: './profile' },
      { path: '/:locale/home', component: './home' },
      { path: '/:locale/about', component: './about' },
    ],
  },
];

在这个示例中，:locale 表示语言代码。当用户访问 /en-US/home 时，将使用英语作为语言。当用户访问 /zh-CN/home 时，将使用中文作为语言。

总结

这就是在 Umi中使用国际化的基本方法。你可以根据需要进行修改和扩展。下面是一些相关的链接，可以帮助你进一步学习：

希望这些信息能帮助你实现你的 Umi2 项目的国际化。如果你还有其他问题，请随时提出。

感谢老板.gif

umi2也要进行国际化