Vue3 + Ant Design Vue 全局配置中文指南

在 Vue3 项目中使用 Ant Design Vue 时，很多开发者都会遇到一个问题：如何让整个应用组件统一显示中文。本文将详细讲解 全局配置中文的方法，并配合日期组件的国际化示例。

---

一、为什么需要全局配置中文

Ant Design Vue 的组件默认语言是英文，例如：

• DatePicker 默认显示 "Select date"

• Pagination 默认显示 "Next"、"Previous"

如果希望整个应用都是中文，就需要对组件进行 国际化配置。
Ant Design Vue 提供了 ConfigProvider 组件来实现全局配置。

---

二、安装依赖

npm install ant-design-vue dayjs

注意：Ant Design Vue 3 版本需要 dayjs 来处理日期国际化。

---

三、全局中文配置示例

在 App.vue 中：

<script setup lang="ts">
import zhCN from "ant-design-vue/es/locale/zh_CN";
</script><template><div id="app"><a-config-provider :locale="zhCN"><router-view /></a-config-provider></div>
</template>

这里做了两件事：

1. 引入 zhCN 国际化包

2. 使用 <a-config-provider> 包裹整个应用

这样，应用中的所有 Ant Design Vue 组件都会使用中文。

---

四、日期组件中文化

Ant Design Vue 的日期组件依赖 dayjs，需要设置 locale 才能显示中文：

import dayjs from "dayjs";
import "dayjs/locale/zh-cn";dayjs.locale("zh-cn"); // 设置 dayjs 为中文

完成后，DatePicker、TimePicker 等日期组件就会显示中文月份和星期。

---

五、完整项目入口示例

在 main.ts 中：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia } from "pinia";
import Antd, { ConfigProvider } from "ant-design-vue";
import "ant-design-vue/dist/reset.css";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";dayjs.locale("zh-cn"); // 设置 dayjs 为中文const app = createApp(App);// 全局注册 ConfigProvider
app.component(ConfigProvider.name || "ConfigProvider", ConfigProvider);// 使用插件
app.use(router).use(createPinia()).use(Antd);// 挂载应用
app.mount("#app");

核心要点：

1. 全局注册 ConfigProvider

   app.component(ConfigProvider.name || "ConfigProvider", ConfigProvider);

   • 保证全局组件可用，无需每个组件单独 import。

2. 统一插件注册

   • router → pinia → Antd

   • 确保依赖正确加载。

3. 日期组件中文化

   • dayjs.locale("zh-cn") 配合 DatePicker 使用。

---

六、总结

通过以上配置，你可以实现：

• 全局中文组件：Pagination、DatePicker、TimePicker 等组件全部显示中文

• 日期组件中文化：月份、星期显示中文

• 统一管理：无需在每个组件重复配置

✅ Tip：如果需要修改主题或组件大小，也可以通过 ConfigProvider 的 theme 或 componentSize 属性统一管理。

---

这样配置后，你的 Vue3 + Ant Design Vue 项目就能 全局使用中文，且可维护性高，非常适合中大型项目。