如何在Nuxt 3中使用nuxtjs/moment？解决ES模块加载警告

一、替换不兼容的旧依赖 #

nuxtjs/moment是针对Nuxt 2的CommonJS模块，和Nuxt 3的ES模块体系冲突，会触发你遇到的警告。先卸载旧依赖：

npm uninstall nuxtjs/moment @nuxtjs/moment

二、安装适配ES模块的Moment版本 #

安装最新版Moment（2.29.0+已原生支持ES模块）：

npm install moment

三、创建Nuxt插件全局引入Moment #

在项目plugins目录下新建moment.client.ts（或.js）文件：

import moment from 'moment'

export default defineNuxtPlugin(nuxtApp => {
  // 全局注册到Nuxt应用实例
  nuxtApp.provide('moment', moment)
})

四、在组件/页面中使用 #

模板中直接调用： #

<template>
  <p>当前日期：{{ $moment().format('YYYY-MM-DD HH:mm:ss') }}</p>
</template>

脚本中调用： #

<script setup>
const { $moment } = useNuxtApp()
console.log('相对时间：', $moment('2024-01-01').fromNow())
</script>

五、解决剩余ES模块警告 #

如果替换依赖后仍有警告：

1. 检查项目根目录package.json，确保存在"type": "module"字段（Nuxt 3初始化项目默认已配置）；
2. 若必须使用某个CommonJS模块，可在nuxt.config.ts中添加Vite配置允许外部化：

export default defineNuxtConfig({
  vite: {
    ssr: {
      noExternal: ['moment']
    }
  }
})

内容的提问来源于stack exchange，提问作者Upro