Nuxt3集成Element Plus时_dayjs.default.extend报错求助

问题分析 #

报错指向Element Plus的time-picker组件调用_dayjs.default.extend失败，核心原因：

• package.json中同时在dependencies和devDependencies声明了不同版本的element-plus，引发依赖版本冲突
• dayjs版本不兼容或未被Element Plus正确加载

解决步骤 #

1. 清理重复的Element Plus依赖 #

打开package.json，删除devDependencies中的element-plus条目，确保仅在dependencies中保留单一版本的Element Plus（建议统一为稳定版）。

修改后的dependencies示例：

"dependencies": {
  "@nuxtjs/axios": "^5.13.6",
  "@nuxtjs/color-mode": "^3.2.0",
  "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
  "apexcharts": "^3.36.3",
  "axios": "^1.3.4",
  "bootstrap": "^5.2.3",
  "bootstrap-icons": "^1.10.2",
  "element-plus": "^2.3.5", // 统一使用一个稳定版本
  "feather-icons": "^4.29.0",
  "vue3-apexcharts": "^1.4.1"
}

2. 安装Element Plus兼容的dayjs版本 #

Element Plus 2.x依赖dayjs@^1.11.x，执行以下命令：

# 卸载现有dayjs（若已安装）
npm uninstall dayjs
# 安装指定兼容版本
npm install dayjs@^1.11.7

3. 确认Nuxt配置正确 #

在nuxt.config.ts中确保@element-plus/nuxt已正确加入模块列表，无需手动引入dayjs：

export default defineNuxtConfig({
  modules: [
    '@element-plus/nuxt',
    // 其他项目模块...
  ],
  // 可选：Element Plus按需加载等配置
  elementPlus: {
    importStyle: 'scss'
  }
})

4. 清理缓存并重装依赖 #

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 清理Nuxt缓存
npx nuxt clean
# 启动项目
npm run dev

验证 #

启动项目后，测试Element Plus的time-picker、calendar等组件，确认报错消失。

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