umi3使用国际化

本文介绍如何使用UmiJS实现网站的多语言支持。通过配置umirc.ts文件启用默认国际化设置,并在src/locales目录下创建不同语言的翻译文件。文章还展示了如何在组件中调用Intl来显示翻译后的文本。

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

umi3官网:https://v3.umijs.org/zh-CN/plugins/plugin-locale

.umirc.ts文件

开启默认配置:

export default {
  locale: {
    default: 'zh-CN',
    antd: false,
    title: false,
    baseNavigator: true,
    baseSeparator: '-',
  },
};

项目src目录下新建目录locales
在这里插入图片描述

en-US.js文件

export default {
  WELCOME: 'welcome'
}

zh-CN.js文件

export default {
  WELCOME: '欢迎'
}

utils/common.ts文件

//写法1
import { getIntl} from 'umi';
export const intl = (key) => {
 return getIntl().formatMessage({id:key})
}

utils/common.ts文件

//写法2
import { useIntl} from 'umi';

export const intl = (key) => {
 return useIntl().formatMessage({id:key})
}

应用

import {intl} from '@/utils/commom'

export default function Layout(props) {
  console.log('props', props);

  return (
    <div>
      hello
      <p>
        {intl('WELCOME')}
      </p>
      {props?.children}
    </div>
  )
}

在这里插入图片描述

更改默认语言

  locale: {
    default: 'en-US',
    antd: false,
    title: false,
    baseNavigator: true,
    baseSeparator: '-',
  }

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值