Ant Design Vue 日期选择器中英文混杂问题分析与解决

项目背景

• 技术栈：Vue 3.5.24 + Ant Design Vue 4.2.6
• 日期库：从 v3 起 Ant Design Vue 默认使用 dayjs

问题描述

在全局已经配置中文（ConfigProvider + dayjs.locale('zh-cn')）的情况下，DatePicker 组件仍出现“中英文混杂”：

• “年”“今天”等字样为中文
• 月份（Jan/Feb…）与星期（Mon/Tue…）依旧显示英文
• 无论全局注入还是局部覆盖 locale 均无效

深层原因剖析

1. dayjs 版本过旧
   早期 dayjs 的 zh-cn 语言包缺失 months/weekdays 的中文定义，或补丁未完全下发。

2. 多版本 dayjs 共存
   pnpm 的去重策略可能导致锁文件里存在多个 dayjs 版本，入口文件设置的 dayjs.locale 未必作用于 Ant Design Vue 内部使用的实例。

3. 执行顺序/Tree-shaking 问题
   Vite 的懒加载或 chunk 切分可能使 import 'dayjs/locale/zh-cn' 未及时执行；若没有紧跟 dayjs.locale('zh-cn')，组件渲染阶段仍使用默认英文。

4. 语言包字段缺失
   旧版本 dayjs 的 zh-cn 语言包里 weekdaysShort、monthsShort 等字段为空，Antd 组件 fallback 为英文。

排查步骤（建议流程）

1. 确认全局中文配置

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

2. 检查 dayjs 版本

   pnpm list dayjs pnpm why dayjs 关注是否存在多个版本或锁定在 1.11.0 之前。

3. 查看本地语言包
   打开 node_modules/dayjs/locale/zh-cn.js，确认 months、weekdays 等数组是否为中文。

解决方案

• 结论：升级 dayjs 至 ≥ 1.11.19

• 操作步骤： pnpm add dayjs@1.11.19 -w

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

  • 重启 dev server 并清理缓存，确认 DatePicker 面板的月份、星期、按钮均已中文化。

可选补充

• Ant Design Vue 的日期国际化完全依赖 dayjs，语言异常优先排查 dayjs 版本和语言包
• Monorepo/多包环境需确保 dayjs 版本统一，避免多版本导致的 locale 失效
• import 'dayjs/locale/zh-cn' 后务必紧接 dayjs.locale('zh-cn')，并确保在入口同步执行

参考资料

• Ant Design Vue ConfigProvider
• dayjs 国际化文档