今天嘗試用vite和vue3寫項(xiàng)目，但是碰到一個(gè)問題，引入moment.js，使用中文國際化的時(shí)候，一直沒有生效。

不生效的寫法如下，正常來說應(yīng)該沒有問題。

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

那怎么解決呢，其實(shí)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)的寫法，搜索了好久才解決。

留下了沒有技術(shù)的淚水。

避免踩坑，記錄一下。