Vue3项目Ant-Design-Vue汉化（a-date-picker等组件）

前言

Ant-Design-Vue 组件库某些组件默认是英文显示的，如时间选择等组件。这些组件的显示需要用户手动去进行汉化。

官方文档对此也给出了说明及示例，但截止到本篇博客发布日期，示例与实际项目配置存在小幅度出入。我也因此踩了一些坑，所以萌生了写这一篇博客的念头，分享一下本次经历，尽量避免其他人和我踩了相同的坑。

操作方法

1. 官网说明及示例

先看官网给出的说明及示例。

<template>
  <a-config-provider :locale="locale">
    <App />
  </a-config-provider>
</template>

<script>
  import zhCN from 'ant-design-vue/es/locale/zh_CN';
  import dayjs from 'dayjs';
  import 'dayjs/locale/zh-cn';
  dayjs.locale('zh-cn');

  export default {
    data() {
      return {
        locale: zhCN,
      };
    },
  };
</script>

官网给出的说明大体上是没有问题的，只在细节上有一些需要注意的地方，下面是实际操作中的配置过程。

2. 解决办法

Ant-Design 在 V3 版本开始，默认使用 dayjs 替换了 momentjs 库。

原本是打算用 momentjs 解决汉化时间问题的，但既然官网说了默认使用 dayjs 库，那我也同样使用这个库好了。

安装及使用 dayjs 库。

npm install dayjs --save

安装完成后在 main.ts 文件中添加以下配置。

main.ts

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

接着在 App.vue 中添加以下配置，为方便浏览，以下为 App.vue 完成内容。

App.vue

<script setup lang="ts">
import zhCN from 'ant-design-vue/es/locale/zh_CN';
</script>

<template>
  <a-config-provider :locale="zhCN">
    <router-view />
  </a-config-provider>
</template>

这样就已经配置完成了，接下来看效果。

可以看到，汉化已经成功，至此 ant-design 汉化配置成功。

END