今天尝试用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)
的写法,搜索了好久才解决。
留下了没有技术的泪水。
避免踩坑,记录一下。