vue3.0 + TS + AntD 项目开发学习笔记：AntD UI 工具类与多国语言

近期在用 vue3.0 + TS + AntD 开发项目，在项目开发时，经常会考虑多国语言，由于是台企，所以需要简繁转换，这里简单记录一下配置过程。 首先安装 AntD UI 工具，这个按照官方文档步骤进行即可，没有什么难度，一般都不会有什么问题。安装成功后就要进行全局注册，在 main.ts 文件写如下代码：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入 antd 组件
import Antd from 'ant-design-vue'
// 导入样式
import 'ant-design-vue/dist/antd.less'
const app = createApp(App);
app.use(Antd);

此处国际化选择采用 i18n，VUE3 必须使用 vue-i18n@next 安装，安装完成后，进行全局注册。在 main.ts 文件写如下代码：

import i18n from './i18n/i18n'
const app = createApp(App);
app.use(i18n);

注册完成后，创建语言文件。 在 src 文件夹下创建新文件夹 i18n,在 i18n 文件夹中创建 ts 文件 i18n.js, 文件代码如下：

import { createI18n, useI18n as use } from 'vue-i18n' //引入 vue-i18n 组件
import messages from './locale' // 导入语言包信息

// 从 localStorage 获取语言选择
const i18n = createI18n({
  legacy: false,
  locale: localStorage.lang ||'zh-cn', // 初始未选择默认 zh-cn 中文
  messages,
  silentTranslationWarn: true,
});
export let useI18n = use;

export default i18n;

再在文件夹 i18n 中创建文件夹 locale, 在文件夹中新增三个 ts 文件，分别为 index.ts, zh-cn.ts 和 zh-tw.ts，代码分别如下：

// 简中语言包，common,customer,message,tracking,dayjs 分别为子模块文件夹
import common from './cn/common'
import customer from './cn/customer'
import message from './cn/message'
import tracking from './cn/tracking'
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

const cn = {
    common,
    customer,
    message,
    tracking,
    dayjs
}

export default cn

// 繁中语言包，common,customer,message,tracking,dayjs 分别为子模块文件夹
import common from './tw/common'
import customer from './tw/customer'
import message from './tw/message'
import tracking from './tw/tracking'
import dayjs from 'dayjs';
import 'dayjs/locale/zh-tw';

const tw = {
    common,
    customer,
    message,
    tracking,
    dayjs
}
export default tw

在 index.ts 文件中导入 zh-cn.ts 和 zh-tw.ts。

import cn from './zh-cn'
import tw from './zh-tw'

export default {
    'zh-cn': cn,
    'zh-tw': tw
  };

这样配置之后就可以在 文件夹 cn 和 tw 总任意添加想要配置的模块文字，并更新在 zh-cn.ts 和 zh-tw.ts 文件中即可。 结构图如下：

这样就配置好了 i18n 语言包，可以在 vue 文件和 js 文件中使用了。 在 templete 中使用同 vue2.0 一样，直接用 {{ $t('common.navMenu.tw') }}, 如果要切换语言，使用语句为 locale.value = 'zh-tw'; 代码如下：

<templete>
   <a-sub-menu key="4">
     <template #icon>
      <global-outlined />
     </template>
     <template #title>{{ $t('common.navMenu.language') }}</template>
       <a-menu-item key="4-1">{{ $t('common.navMenu.cn') }}
          </a-menu-item>
          <a-menu-item key="4-2">{{ $t('common.navMenu.tw') }}
          </a-menu-item>
   </a-sub-menu>
</templete>

<script setup lang="ts">
import { useI18n } from '../../i18n/i18n';
const { locale } = useI18n();
function toUser(params: any) {
    switch (params.key) {
        case '4-1':
            // 简体
            localStorage.lang = 'zh-cn';
            locale.value = 'zh-cn';
            location.reload();
            break;
        case '4-2':
            // 繁体
            localStorage.lang = 'zh-tw';
            locale.value = 'zh-tw';
            location.reload();
            break;
    }
}
</script>

如果是要在 ts 文件中调用，则需要导入 i18n 文件，与 vue2.0 的区别是要添加一个 .global 后缀，代码如下：

import i18n from '../i18n/i18n';
i18n.global.t('common.navMenu.tw')

以上只是针对 i18n 语言包的配置和使用，如果是 AntD UI 自带的文字也需要同步切换的话，这里使用了 ant-design-vue 提供的一个 Vue 组件 ConfigProvider 用于全局配置国际化文案。在 App 入口文件做如下配置：

<template>
  <a-config-provider :locale="curLanguage">
    <div id="app">
      <div class="app-main">
        <!-- 通过 isRouterAlive 控制 router-view 的显示和隐藏，来重新渲染路由区域，达到页面刷新的效果 -->
        <div v-if="isRouterAlive">
          <!-- 需要缓存的视图组件 -->
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
          </keep-alive>
        </div>
        <!-- 不需要缓存的视图组件 -->
        <div v-if="isRouterAlive">
          <router-view v-if="!$route.meta.keepAlive" />
        </div>
      </div>
      <Footer />
    </div>
  </a-config-provider>
</template>

<script setup lang="ts">
import antdCN from 'ant-design-vue/es/locale/zh_CN'
import antdTW from 'ant-design-vue/es/locale/zh_TW'
import { useI18n } from './i18n/i18n'
const { locale } = useI18n();
// 当语言文字切换后，将 curLanguage 设置为 antdCN 或者 antdTW ，与 locale.value 同步
const curLanguage = locale.value === 'zh-cn' ? antdCN : antdTW;
</script>

以上就是我项目中做 AnTD UI 和国际化语言配置的全部过程，仅供学习参考。