Appearance
多语言
介绍
在实际的项目开发中,我们有可能会用到多语言,并且为了方便开发与统一维护,项目集成了多语言功能。
目前项目多语言配置了
en-US
英文、zh-CN
中文简体、zh-TW
中文繁体三类语种。
重点:
项目考虑了加载与运行效率,所以多语言功能按照按需手动引入集成,@/locales
全局国际化文件目录下语言配置文件已经默认集成。
如果多语言语种文件中下标key出现重名,权重如下:
@/locales
>@/***/***/locales
语种文件名规则
为了实现自动化导入,并为了方便开发与统一维护,多语言语种配置文件名,命名规则 必不可少。
文件名规则:/^([a-z]{2})-?([A-Z]{2})?\.ts$/
,比如:zh-CN.ts
。
// @/@types/i18n.d.ts
export type I18nKey = 'zh-CN' | 'zh-TW' | 'en-US';
export interface I18nVal {
[key: string]: string;
}
export type I18n = {
[key in I18nKey]?: I18nVal;
};
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
多语言使用
目前项目多语言有en-US
英文、zh-CN
中文简体、zh-TW
中文繁体三类语种。如果你创建的Layout
、组件
或页面
使用多语言,以@/pages/home
页面为例:
views
└── Home
├── locales # 当前页面国际化目录
│ ├── en-US.ts # 当前页面英文国际化配置
│ ├── index.ts # 当前页面国际化入口
│ ├── zh-CN.ts # 当前页面中文简体国际化配置
│ └── zh-TW.ts # 当前页面中文繁体国际化配置
├── index.tsx # 当前页面入口
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
以上可以看出:
1、
@/pages/Home
下创建locales
目录。2、在
locales
目录中创建en-US.ts
、zh-CN.ts
、zh-TW.ts
对应语种文件与index.ts
默认入口文件。3、语种文件中书写格式:
// I18nVal
export default {
'key': 'value',
};
1
2
3
4
2
3
4
- 4、
index.tsx
文件中使用:
import { useRecoilValue } from 'recoil';
import { useI18n } from '@/store/i18n';
import locales from './locales';
export default () => {
const t = useRecoilValue(useI18n(locales));
return (
<div>
{t('page.home.articlechartcard.card-title')}
</div>
);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
新增多语言语种
目前项目多语言有en-US
英文、zh-CN
中文简体、zh-TW
中文繁体三类语种。如果您需要新增语种如下操作即可,以葡萄牙语
为例:
1、@/store/i18n.ts
中引入 antd
的 葡萄牙语
并配置
/**
* antd 多语言 配置
*/
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import zhTW from 'ant-design-vue/es/locale/zh_TW';
import enUS from 'ant-design-vue/es/locale/en_US';
import ptBR from 'ant-design-vue/es/locale/pt_BR';
export const antdMessages: { [key: string]: any} = {
'zh-CN': zhCN,
'zh-TW': zhTW,
'en-US': enUS,
'pt-BR': ptBR, // 葡萄牙语
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
2、@/components/SelectLang
配置下拉选项
const menuItems = useMemo<ItemType[]>(
() => [
{
key: 'zh-CN',
label: <> 简体中文</>,
icon: <>🇨🇳 </>,
disabled: i18nLocale === 'zh-CN',
},
{
key: 'zh-TW',
label: <> 繁体中文</>,
icon: <>🇭🇰 </>,
disabled: i18nLocale === 'zh-TW',
},
{
key: 'en-US',
label: <> English</>,
icon: <>🇺🇸 </>,
disabled: i18nLocale === 'en-US',
},
{
key: 'pt-BR',
label: <> English</>,
icon: <>🇧🇷 </>,
disabled: i18nLocale === 'pt-BR',
},
],
[i18nLocale],
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
3、 在需要的的地方目录下中创建 pt-BR.ts
文件
内容格式如下,以@/locales
全局国际化文件目录下语言配置文件为例:
// @/locales/pt-BR.ts
export default {
'empty': 'vazio',
'app.global.menu.notfound': 'Não encontrado',
'app.global.form.validatefields.catch': 'A verificação não foi aceitada. por favor, verifique',
};
1
2
3
4
5
6
2
3
4
5
6