使用 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: {...},
});
那该怎么办呢?我们来看看大佬给出的解决办法:
你懂我...不,你懂他意思吧?