Umi 3配置路由国际化，及配置不生效的解决方法

最近在搞一个 Umi 3 项目的多语言/国际化支持，在修改路由标题时，使用 getIntl().formatMessage() 方法时会报错。

原因是：getIntl() 是运行时方法，而 umirc.ts 是构建时配置文件，无法在初始化阶段调用动态函数。需要参考一下方法，配置 Umi 3 路由的多语言：

一、配置国际化插件

启用插件与基础配置

在 .umirc.ts 中配置 locale 参数，指定默认语言、语言文件路径和分隔符：

export default {
  locale: {
    default: 'zh-CN', // 默认语言
    baseSeparator: '-', // 语言文件分隔符（如 zh-CN.ts）
    title: true,       // 启用标题国际化支持[1,4](@ref)
  },
};

创建多语言文件

在 src/locales 目录下创建语言文件，例如：

// zh-CN.ts
export default {
  'route.login': '登录',
  'route.dashboard': '仪表盘',
};

// en-US.ts
export default {
  'route.login': 'Login',
  'route.dashboard': 'Dashboard',
};

二、路由标题国际化配置

在 路由配置 中使用国际化键作为 title 的值：

// .umirc.ts 或 config/config.ts
export default {
  routes: [
    {
      path: '/login',
      component: '@/pages/Login',
      title: 'route.login', // 引用多语言键
    },
    {
      path: '/dashboard',
      component: '@/pages/Dashboard',
      title: 'route.dashboard',
    },
  ],
};

三、动态路由标题

若标题需要参数化（如显示用户名），可在语言文件中定义动态插值：

// zh-CN.ts
export default {
  'route.user': '{name}的个人中心',
};

使用时通过 intl.formatMessage 传参：

const title = intl.formatMessage({ id: 'route.user' }, { name: '张三' });

四、注意事项

文件命名规范

多语言文件需符合 <lang>-<COUNTRY>.(js|ts|json) 格式（如 zh-CN.ts）。

标题优先级

路由中的 title 会覆盖全局配置的默认标题。

缓存与持久化

配置 useLocalStorage: true 后，当前语言会持久化到 localStorage 中。

特别注意

需要注意的是第一步中 locale 的 title 属性，该配置默认是 false，如果不设置为 true，标题只会显示多语言的 key 值，不会自动转换。

通过以上步骤，可实现路由标题根据语言环境动态切换，满足多语言项目的需求。具体配置可参考 Umi 官方文档中的国际化插件章节和路由配置示例。

未经允许不得转载：前端资源网 - w3h5 » Umi 3配置路由国际化，及配置不生效的解决方法