vue3+antd-design-vue语言国际化配置

1.安装antd-design-vue 时使用npm i --save ant-design-vue@next命令，（文末会贴出相关框架版本）；
2.语言国际化配置分为两种，第一种是我们自定义组件使用到的文字，第二种是ui框架自带的文字。
思路：自定义文字可动态匹配，ui框架上的可采用它自带的国际化配置
文件结构

新建语言包文件：
zh_CN.ts

// 中文翻译
export default {
  title: "国际化语言配置",
  btn: "按钮",
  add: "添加",
  del: "删除",
  edit: "编辑",
  description:"描述"
};

en_US.ts

// 英文翻译
export default {
  title: "International language configuration",
  btn: "btn",
  add: "add",
  del: "del",
  edit: "edit",
  description:"description"
};

import { createI18n, useI18n as use } from "vue-i18n";

export function getLanguage() {
  let lang = "zh_CN";
  if (window.localStorage.getItem("lang")) {
    lang = window.localStorage.getItem("lang");
  }
  console.log(lang, window.localStorage.getItem("lang"));
  return lang;
}

export const langKeys = [
  { value: "zh_CN", label: "简体中文" },
  { value: "en_US", label: "English" },
  { value: "ar_EG", label: "阿拉伯语" },
];

//引入同级目录下文件
const modules = import.meta.globEager(
  "./[[:lower:]][[:lower:]]_[[:upper:]][[:upper:]].ts"
);
function getLangAll(): any {
  let message: any = {};
  getLangFiles(modules, message);
  return message;
}
function getLangFiles(mList: any, msg: any) {
  for (let path in mList) {
    if (mList[path].default) {
      let pathName = path.substr(path.lastIndexOf("/") + 1, 5);
      if (msg[pathName]) {
        msg[pathName] = {
          ...mList[pathName],
          ...mList[path].default,
        };
      } else {
        msg[pathName] = mList[path].default;
      }
    }
  }
}

//注册i8n实例并引入语言文件
const i18n = createI18n({
  legacy: false,
  locale: getLanguage(),
  messages: getLangAll(),
});

export let useI18n = use;
export default i18n;

main.ts注册

import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";

import i18n from "./lang";
async function bootstrap() {
  const app = createApp(App);
  app.use(i18n);
  app.use(Antd);
  app.mount("#app");
}
bootstrap();

新建一个t.ts文件

import { useI18n } from "./index";
import { getLanguage } from "./index";
export default (key: any) => {
  let { t } = useI18n();
  return t(key, {}, { locale: getLanguage() });
};

使用：

<template>
  <ConfigProvider :locale="lang">   //这里使用antd-design-vue自带的国际化配置
    <div>
      {{ t("title") }}
    </div>
        <a-space direction="vertical" :size="12">
      <a-date-picker :value="value1" />
    </a-space>
  </ConfigProvider>
</template>
<script lang="ts" setup>
	import t from "./lang/t";
	import dayjs from "dayjs";
	import "dayjs/locale/zh-cn";
	import "dayjs/locale/ar";
	import "dayjs/locale/en";
	dayjs.locale("zh-cn");
</script>

PS：在引入相关包时出现报错时，参考以上插件的版本号；修改之后页面不重新加载可使用 location.reload();命令
注意：Ant Design Vue 2.x 版本，是为了兼容 Vue3 开发兼容版本，没有带来很多新的特性
3.x 版本在性能、易用性、功能上都有了很大的提升。（日期组件中移除了 Moment.js，请使用 Day.js 替换。使用 TS + Composition Api 几乎重构了所有组件，剩下的也会接下来逐步重构）