Vite + moment 日期选择器无法正常国际化，你可能导入了 UMD 汉化包，而 Vite 只支持 ESM 的依赖

使用 Vite + moment 开发时，日期选择器无法正常国际化，可能是你使用了 import 'moment/locale/zh-cn' 直接从 /locale 文件夹引入的翻译包的缘故，改成 import 'moment/dist/locale/zh-cn' 从 /dist 文件夹引入翻译文件就可以了

// import 'moment/locale/zh-cn';
import 'moment/dist/locale/zh-cn'; // 使用 moment/src/locale/zh-cn 下的中文包也可以

究其原因，我们先打开这两份翻译包对比一下他们的区别：

先看看 moment\locale\zh-cn.js，我们看到这是一个 umd 的版本：

// moment\locale\zh-cn.js
;(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined'&& typeof require === 'function' 
    ? 
    factory(require('../moment')) 
    :
        typeof define === 'function' && define.amd 
        ? 
        define(['../moment'], factory) 
        :
        factory(global.moment)
}(this, (function (moment) { 'use strict';

    //! moment.js locale configuration

    var zhCn = moment.defineLocale('zh-cn', {
        months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
        monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
        weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
        weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
        weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
        longDateFormat: {...},
        meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
        meridiemHour: function (hour, meridiem) {...},
        meridiem: function (hour, minute, isLower) {...},
        calendar: {...},
        dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,
        ordinal: function (number, period) {...},
        relativeTime: {...},
        week: {...},
    });

    return zhCn;

})));

再来看看 moment\src\locale\zh-cn.js，显然是一个 esm 依赖：

// moment\src\locale\zh-cn.js
import moment from '../moment';

export default moment.defineLocale('zh-cn', {
        months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
        monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
        weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
        weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
        weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
        longDateFormat: {...},
        meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
        meridiemHour: function (hour, meridiem) {...},
        meridiem: function (hour, minute, isLower) {...},
        calendar: {...},
        dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,
        ordinal: function (number, period) {...},
        relativeTime: {...},
        week: {...},
});

那该怎么办呢？我们来看看大佬给出的解决办法：

你懂我...不，你懂他意思吧？