Vue 国际化（i18n）、多语言、本地化
# 国际化
如果您使用的 VSCode 开发工具，则推荐安装 I18n-ally (opens new window) 这个插件
安装了该插件后，您的代码内可以实时看到对应的语言内容
# 默认语言
在 src/settings/localeSetting.ts (opens new window) 内可以配置默认语言
export const LOCALE: { [key: string]: LocaleType } = {
ZH_CN: 'zh_CN',
EN_US: 'en',
};
export const localeSetting: LocaleSetting = {
// 是否显示语言选择器
showPicker: true,
// 当前语言
locale: LOCALE.ZH_CN,
// 默认语言
fallback: LOCALE.ZH_CN,
// 允许的语言
availableLocales: [LOCALE.ZH_CN, LOCALE.EN_US],
};
// 配置语言列表
export const localeList: DropMenu[] = [
{
text: '简体中文',
event: 'zh_CN',
},
{
text: 'English',
event: 'en',
},
];
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
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
# 语言配置
# 语言文件
在 src/locales/lang/ (opens new window) 可以配置具体的语言
# 语言使用
引入项目自带的 useI18n 注意不要引入 vue-i18n 的 useI18n
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
const title = t('components.modal.title');
1
2
3
4
5
2
3
4
5
# 切换语言
切换语言需要使用 src/locales/useLocale.ts (opens new window)
import { useLocale } from '/@/locales/useLocale';
const { changeLocale } = useLocale();
changeLocale('en');
1
2
3
4
5
2
3
4
5
# 新增语言
# 语言文件
在 src/locales/lang/ (opens new window) 增加对应语言的文件即可
# 新增语言
目前项目自带的语言只有 zh_CN 和 en 两种
如果需要新增，按以下操作即可
- 在 src/locales/lang/ (opens new window) 下新增相应的语言目录及语言文件并引入 引入 ant-design-vue 和 moment 对应的语言包
- 在 types/config.d.ts (opens new window) 内加上预览类型定义
- 在 src/settings/localeSetting.ts (opens new window) 修改语言配置
