# 多语言

# 介绍

在实际的项目开发中,我们有可能会用到多语言,并且为了方便开发与统一维护,项目集成了自动导入多语言功能。

目前项目多语言配置了 en-US英文、zh-CN中文简体、zh-TW中文繁体三类语种。

重点:

项目会自动导入 @/locales全局国际化文件目录下语言配置文件、@/components/***/locales全局公用组件下语言配置文件、@/layouts/***/locales项目 layout下语言配置文件、@/views/***/locales页面组件目录下语言配置文件,以上4个相对位置。

如果多语言语种文件中下标key出现重名,权重如下:

@/locales > @/components/***/locales > @/layouts/***/locales > @/views/***/locales

# 语种文件名规则

为了实现自动化导入,并为了方便开发与统一维护,多语言语种配置文件名,命名规则 必不可少,并且需要在以上述说的4个位置中创建。

文件名规则:/^([a-z]{2})-?([A-Z]{2})?\.ts$/,比如:zh-CN.ts

# 多语言使用

目前项目多语言有en-US英文、zh-CN中文简体、zh-TW中文繁体三类语种。如果你创建的Layout组件页面使用多语言,以@/views/home页面为例:

views                  
└── home              
    ├── locales          # 当前页面国际化目录
    │   ├── en-US.ts     # 当前页面英文国际化配置
    │   ├── zh-CN.ts     # 当前页面中文简体国际化配置
    │   └── zh-TW.ts     # 当前页面中文繁体国际化配置
    ├── index.vue        # 当前页面入口
1
2
3
4
5
6
7

以上可以看出:

  • 1、@/views/home 下创建 locales 目录。

  • 2、在 locales 目录中创建 en-US.tszh-CN.tszh-TW.ts 对应语种文件。

  • 3、语种文件中书写格式:

export default {
    'key': 'value',
};
1
2
3
  • 4、index.vue 文件模板中使用:
<template>
    <div >
     {{t('key')}}
    </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";
export default defineComponent({
    setup() {
        const { t } = useI18n();

        return {
            t
        }
    }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 新增多语言语种

目前项目多语言有en-US英文、zh-CN中文简体、zh-TW中文繁体三类语种。如果您需要新增语种如下操作即可,以葡萄牙语为例:

# 1、@/config/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、@/components/SelectLang 配置下拉选项

const locales: string[] = ['zh-CN', 'zh-TW', 'en-US', 'pt-BR'];
const languageLabels: {[key: string]: string} = {
    'zh-CN': '简体中文',
    'zh-TW': '繁体中文',
    'en-US': 'English',
    'pt-BR': 'Português' // 葡萄牙语
};
const languageIcons: {[key: string]: string} = {
    'zh-CN': '🇨🇳',
    'zh-TW': '🇭🇰',
    'en-US': '🇺🇸',
    'pt-BR': '🇧🇷' // 葡萄牙语
};
1
2
3
4
5
6
7
8
9
10
11
12
13

# 3、 在以上"重点"中述说的4个相对位置中创建 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