记一次ant-design-vue的datepicker中英文混杂的问题

项目环境：

"ant-design-vue": "^2.2.8",
"moment": "^2.29.1",
"vue": "^3.2.22",

问题：

开始日期和结束日期是中文，但是其中的 Nov Dec 及星期都是英文。

结论

先说结论，直接在 main.ts 中添加引入 import "moment/dist/locale/zh-cn"; 注意加上 dist 。

// main.ts

import { createApp } from "vue";
import App from "./App.vue";
import "moment/dist/locale/zh-cn";
const app = createApp(App);

app.mount("#app");

解决路径

遇到这个问题的时候我首先怀疑是自己代码的问题。

由于我的项目采用了 CDN优化 ，所以我一开始怀疑是它们导致的问题。因为 ant-design-vue 不推荐 CDN引入，所以我只引入了 moment.js 。

<script
  type="text/javascript"
  src="https://cdn.staticfile.org/moment.js/2.29.1/moment.min.js"
  ></script>
<script src="https://cdn.staticfile.org/moment.js/2.29.1/locale/zh-cn.js"></script>

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        externalGlobals({
          moment: "moment",
        }),
      ],
    },
  },
}

我尝试将它们删除，结果是发现 屁用没有 。

于是我打开搜索引擎，查看是否有相关解决方案，其中官方文档最多的是提示我使用 AConfigProvider 。

<script setup lang="ts">
import { ConfigProvider as AConfigProvider } from "ant-design-vue";
import zhCN from "ant-design-vue/es/locale/zh_CN";
</script>
<template>
  <a-config-provider :locale="zhCN">
    <router-view></router-view>
  </a-config-provider>
</template>

这是我一开始就配置好的内容，根本就没有需要修改的地方。

由于是半中文半英文的原因，我很快把问题定位到 moment.js 上，于是出现了这样的解决方案。

// main.ts
import moment from "moment";
import "moment/locale/zh-cn";

然而并没有效果，不过幸运的是，不止我一个人没有效果，很多人都遇到了类似的问题。

这个人在思否上的回复很关键，让我意识到问题出现在打包工具上。

由于我是用的 vite 而不是 webpack ，所以我将问题锁定在 vite + moment 上。

于是我找到了下面这篇文章找到原因了，是vite的问题。先看尤大关于这个的回复。

然后就找到了结论的答案。

总结

原因就在于 moment/locale/zh-cn 是 umd 模块，而 moment/dist/locale/zh-cn 是 esm 模块。而 vite 对这两种模块的行为是区别的，必须是ES modules。于是 moment 的本地化模块根本就没被正常加载，自然也就无效了。