【踩坑】vite项目使用ant＜a-date-picker /＞提示报错 rr.isMoment is not a function 解决方法

1、问题描述

      项目技术栈：vue@2.6.10、ant-design-vue@1.7.8、vite@2.8.0

      在 vite 项目中，使用 antdv  <a-date-picker/> 组件通过 disabledDate 参数限制可选日期时，发现无法选中日期，控制台提示报错：rr.isMoment is not a function 

2、分析原因

     经排查，报错代码位于 antd 框架内置 moment-util.js 文件 moment.isMoment 方法。由于 antd 主要是通过 webpack 方式打包的，分析可能是低版本 antd 没有完全兼容 vite 开发环境，然而 ant-design-vue@1.7.8 已经不再支持维护了…… 既然这是源码报错，那要怎么办呢？ 

3、解决方法

      起初通过全网搜寻解决方法，却发现没有相关技术文章。尝试通过 cdn 方式引入 antd.min.js，然而并没有解决问题……

<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.js"></script>

     由于是框架源码出现异常，不太好改动，只能通过引入插件方式打补丁，在 npmjs 官网找到相应插件 ant-design-vue-vite、ant-design-vue-vite-fix、vite-plugin-antdv-fix，然而在项目引入这些插件后，依旧没能解决这个报错问题……

      在经过一番探索后，终于找到两个还不错的解决方法。

     1）方法一：调整项目构建工具（彻底性解决）

     直接将 vite 项目改用 vue-cli 或 webpack 构建工具，这是最直接的解决方法，能彻底解决依赖兼容问题。不过，对于开发程度较高的项目而言，此时调整项目构建工具的成本可能会大一些。

     2）方法二：替换Moment插件（针对性解决）

     既然这个报错本质上是 antd 内置 moment.isMoment( ) 方法执行异常，那么换一个思路，能否绕过这个日期库的报错呢？

     经过查询相关资料发现，通过引入插件可修改 antdv 内置 moment ，在 npmjs 官网找到相关插件 antd-dayjs-webpack-plugin、antd-dayjs-vite-plugin、vite-plugin-antd-use-dayjs 等。经过实践后，发现引入 vite-plugin-antd-use-dayjs 插件能实现将 antd 内置 moment 转成 dayjs，绕过源码的 isMoment 报错问题，成功解决 date-picker 选值异常问题。

npm i @wry-smile/vite-plugin-antd-use-dayjs

// vite.config.js 或 vite.config.ts 
import { vitePluginAntdUseDayjs } from '@wry-smile/vite-plugin-antd-use-dayjs'
export default defineConfig({
  plugins: [
    // default locale zh-cn
    vitePluginAntdUseDayjs.vite(),
  ],
})

执行代码可见，<a-date-picker /> @change 方法输出值不再是moment格式，而是dayjs格式。