使用moment本地化无效

Question

环境
moment.js : 2.29.1
ant-design-vue: 2.1.2
vue : 3.0.5
vite : 2.0.0-beta.4

<script lang="ts">
import { defineComponent} from "vue";
import moment from "moment";
import  "moment/locale/zh-cn";

export default defineComponent({
  name: "HelloWorld",
  setup: () => {
    moment.locale("zh-cn");
    console.log(moment.weekdaysMin());   
  },
});
</script>

DatePicker显示日期部分还是en,log可以看到weekdaysMin是en

如果使用：

 moment.updateLocale("zh-cn", {
      months: "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split(
        "_"
      ),
      monthsShort: "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split(
        "_"
      ),
      weekdays: "星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),
      weekdaysShort: "周日_周一_周二_周三_周四_周五_周六".split("_"),
      weekdaysMin: "日_一_二_三_四_五_六".split("_"),
    });
    console.log(moment.weekdaysMin());

这个就正常了

请问为什么按照官网写的locale设置zh_cn无效呢

Answer 1

找到原因了，是vite的问题。先看尤大关于这个的回复
https://github.com/vitejs/vit...

再看下moment/locale/zh-cn这个文件

;(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;
 
})));

这是一个umd,而moment/dist/locale/zh-cn 是一个esm

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: {...},
});

所以应该使用import "moment/dist/locale/zh-cn";

<script lang="ts">
import { defineComponent } from "vue";
import moment from "moment";
import "moment/dist/locale/zh-cn";

export default defineComponent({
  name: "HelloWorld",
  setup: () => {  
    console.log(moment.locale());
    }
  },
);
</script>

Answer 2

以下是节选自官网的说明，在2.12.0中，moment.locale()就已经废弃了，需要使用moment.updateLocale()来代替

2.12.0 deprecated using moment.locale() to change an existing locale. Use moment.updateLocale() instead.