Vue3中使用Luxon报错：DateTime需通过new调用的解决方法

一、先修复当前报错 #

你遇到的TypeError是因为Luxon的DateTime是类，不能直接像普通函数那样调用DateTime()，必须通过静态创建方法或new关键字实例化。另外注意：Luxon的month属性直接返回1-12的月份值，不需要额外+1。

修正后的代码（Options API写法）：

import { DateTime } from 'luxon';

methods: {
  getCurrentMonth() {
    // 用静态方法now()获取当前时间实例
    const currentMonth = DateTime.now().month;
    return currentMonth;
  }
}

如果是Vue3的Composition API（setup语法）：

import { DateTime } from 'luxon';

setup() {
  const getCurrentMonth = () => DateTime.now().month;
  return { getCurrentMonth };
}

二、Vue3中封装Luxon的两种实用方案 #

方案1：封装成工具函数文件 #

在项目中新建utils/date.js，把常用的日期处理逻辑封装成独立函数：

import { DateTime } from 'luxon';

// 获取当前月份
export const getCurrentMonth = () => DateTime.now().month;

// 格式化日期为指定格式（默认YYYY-MM-DD）
export const formatDate = (date, format = 'yyyy-MM-dd') => {
  return DateTime.fromJSDate(date).toFormat(format);
};

// 计算两个日期的天数差
export const getDaysDiff = (startDate, endDate) => {
  const start = DateTime.fromJSDate(startDate);
  const end = DateTime.fromJSDate(endDate);
  return end.diff(start, 'days').days;
};

组件中按需导入使用：

import { getCurrentMonth, formatDate } from '@/utils/date';

setup() {
  const currentMonth = getCurrentMonth();
  const todayStr = formatDate(new Date());
  return { currentMonth, todayStr };
}

方案2：全局挂载（适合全局频繁使用） #

在main.js中把DateTime挂载到Vue全局属性：

import { createApp } from 'vue';
import App from './App.vue';
import { DateTime } from 'luxon';

const app = createApp(App);
// 挂载到全局
app.config.globalProperties.$luxon = DateTime;

app.mount('#app');

• Options API中直接通过this调用：

methods: {
  getCurrentMonth() {
    return this.$luxon.now().month;
  }
}

• Composition API中通过getCurrentInstance获取：

import { getCurrentInstance } from 'vue';

setup() {
  const { proxy } = getCurrentInstance();
  const currentMonth = proxy.$luxon.now().month;
  return { currentMonth };
}

三、关键注意点 #

• Luxon所有日期操作都基于实例，必须先通过静态方法（now()/fromJSDate()/fromISO()等）创建DateTime实例，再调用实例方法或属性。
• 如需处理时区，可在创建实例时指定，例如：DateTime.now().setZone('Asia/Shanghai')

内容的提问来源于stack exchange，提问作者World's famous people