Antd日期组件汉化不彻底

Antd 日期组件汉化不彻底

最近在项目中使用了 vite + antd, 按照官网配置汉化:

import '../../styles/antd.css';
import '../../styles/app.scss';
import { memo, ReactNode } from 'react';
import { ConfigProvider, message, Grid } from 'antd';
import zh_CN from 'antd/es/locale/zh_CN';
import 'moment/locale/zh-cn';

message.config({
  prefixCls: '不方便透露-message',
});

function AntdProvider({
  children,
  getPopupContainer,
}: {
  children: ReactNode;
  getPopupContainer?: (dom?: HTMLElement) => HTMLElement;
}) {
  const screens = Grid.useBreakpoint();

  return (
    <ConfigProvider
      locale={zh_CN}
      componentSize={screens.xxl ? 'large' : 'middle'}
      prefixCls="不方便透露"
      input={{ autoComplete: 'off' }}
      dropdownMatchSelectWidth={false}
      getPopupContainer={getPopupContainer}
      form={{ colon: false }}
    >
      {children}
    </ConfigProvider>
  );
}

export default memo(AntdProvider);

发现星期和月份不能被汉化。用 webpack 是没问题的, import 'moment/locale/zh-cn'是一个 UMD, Vite 将 Antd 识别成了 ESM, 所以这里要配套改成:

import 'moment/dist/locale/zh-cn';

汉化问题就解决了。