umijs项目-国际化语言配置

配置.umirc.ts

import { defineConfig } from 'umi';

export default defineConfig({
    // 启用layout配置
    layout: {
        name: 'ulives-library-web',
        locale: true, // layout中启用locale配置
        layout: 'side',
    },
    // 路由配置
    routes: [
        {
            name: 'home', // 生成菜单名称，layout-locale开启后，可对应国际化中的menu[name]显示
            path: '/home',
            component: '@/pages/index'
        },
        {
            name: 'manage',
            routes: [
                {
                    name: 'a',
                    path: '/manage/a',
                    component: '@/pages/manage/a'
                },
                {
                    name: 'b',
                    path: '/manage/b',
                    component: '@/pages/manage/b'
                }
            ]
        }
    ],
    // 启用本地化配置
    locale: {
        default: 'zh-CN',
        antd: false,
        title: true,
        baseNavigator: true,
        baseSeparator: '-',
    },
});

配置locale文件

zh-CN.ts

// 国际化不支持对象嵌套的使用
export default {
    title: '标题',
    'menu.home': '首页',
    'menu.manage': '管理',
    'menu.manage.a': '管理A',
    'menu.manage.b': '管理B'
};

页面中使用locale

import { useIntl } from 'umi';

export default function IndexPage() {
    // locale-当前语言配置
    // formatMessage-使用国际化方法，id-为语言文件中的key
    // setLocale-切换当前国际化语言 setLocale('zh-CN', false); false-切换时不进行页面刷新;true-切换进行页面刷新
    const { locale, formatMessage, setLocale } = useIntl();
    return (
        <div>
            <div>{locale}</div>
            <h1>
                {formatMessage({ id: 'title' })}
            </h1>
        </div>
    );
}

效果