moment.js 中文国际化失效 vite vue3

今天尝试用vite和vue3写项目，但是碰到一个问题，引入moment.js，使用中文国际化的时候，一直没有生效。

不生效的写法如下，正常来说应该没有问题。

import moment from "moment";
import "moment/locale/zh-cn";
moment.locale('zh-cn')

查了一下资料，原来vite只支持ES modules,可以看下尤大的在vite的issues的解释:https://github.com/vitejs/vite/issues/945

我们再看下moment/locale/zh-cn的写法，果然不是ES modules写法。

;(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', {
      ...
    });
    return zhCn;
})));

那怎么解决呢，其实moment.js是支持ES modules的国际化的。我们找到的moment/dist/locale/zh-cn，写法如下：

import moment from '../moment';
export default moment.defineLocale('zh-cn', {
 ....
});

所以修改一下我们引入路径就可以了。生效的写法如下。

import moment from "moment";
import 'moment/dist/locale/zh-cn'
moment.locale('zh-cn')

测试一下 果然生效了。

moment.locales()//["en", "zh-cn"]

备注moment.js版本2.29.1。

由于不知道vite只支持ES module(esm)的写法，搜索了好久才解决。

留下了没有技术的泪水。

避免踩坑，记录一下。