Nuxt 3连接PostgreSQL遇plugin.apply错误，求解决方案

问题 #

我要开发一款抓取餐厅每日菜单的Web应用，架构用GitHub Actions做后端（每周定时抓取数据存入PostgreSQL），Nuxt3搭建前端，不需要传统后端，只需要实现前端与数据库的连接。基于空白Nuxt3项目（已按nuxt3-tailwind教程配置），跟着指定教程配置数据库连接时，出现两个问题：

1. 警告提示插件未用defineNuxtPlugin包裹
2. 报错plugin.apply is not a function

完整报错信息如下：

WARN Plugin C:/Vscode/nuxt/third/plugins/db.js is not wrapped in defineNuxtPlugin. It is advised to wrap your plugins as in the future this may enable enhancements.
[nuxt] [request error] [unhandled] [500] plugin.apply is not a function
at C:\Vscode\nuxt\third\virtual:nuxt:C:\Vscode\nuxt\third.nuxt\plugins\server.mjs:34:89
at Module.executeAsync (/C:/Vscode/nuxt/third/node_modules/unctx/dist/index.mjs:111:19)
at setup (C:\Vscode\nuxt\third\virtual:nuxt:C:\Vscode\nuxt\third.nuxt\plugins\server.mjs:34:65)
at C:\Vscode\nuxt\third\node_modules\nuxt\dist\app\nuxt.js:115:60
at fn (C:\Vscode\nuxt\third\node_modules\nuxt\dist\app\nuxt.js:163:44)
at Object.callAsync (/C:/Vscode/nuxt/third/node_modules/unctx/dist/index.mjs:68:55)
at C:\Vscode\nuxt\third\node_modules\nuxt\dist\app\nuxt.js:165:56
at Object.runWithContext (C:\Vscode\nuxt\third\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:3863:18)
at callWithNuxt (C:\Vscode\nuxt\third\node_modules\nuxt\dist\app\nuxt.js:165:24)
at C:\Vscode\nuxt\third\node_modules\nuxt\dist\app\nuxt.js:35:54

解决办法 #

1. 修正插件格式（直接解决警告和报错） #

Nuxt3强制要求所有插件必须用defineNuxtPlugin包裹，你的db.js插件没遵循这个规范，才导致了plugin.apply is not a function错误。按下面的结构重构你的数据库插件：

// plugins/db.server.js（后缀.server.js确保只在服务端加载）
import { defineNuxtPlugin } from '#app'
import pg from 'pg'

export default defineNuxtPlugin(() => {
  const { Pool } = pg
  // 从环境变量读取配置，绝对不能硬编码敏感信息
  const pool = new Pool({
    user: process.env.DB_USER,
    host: process.env.DB_HOST,
    database: process.env.DB_NAME,
    password: process.env.DB_PASSWORD,
    port: process.env.DB_PORT || 5432,
  })

  // 将连接池注入Nuxt上下文，方便后续调用
  return {
    provide: {
      db: pool
    }
  }
})

• 把插件文件名改成db.server.js，避免前端暴露数据库凭证；
• 数据库的账号密码等敏感信息要放在根目录的.env文件中，记得把.env加入.gitignore，防止提交到代码仓库。

2. 更稳妥的替代方案：用Nuxt Server API做中间层 #

直接在插件里连数据库不是最优解，更安全的方式是通过Nuxt的Server API封装数据库操作：

1. 在server/api目录下创建menu.get.js：

// server/api/menu.get.js
import pg from 'pg'

export default defineEventHandler(async (event) => {
  const { Pool } = pg
  const pool = new Pool({
    user: process.env.DB_USER,
    host: process.env.DB_HOST,
    database: process.env.DB_NAME,
    password: process.env.DB_PASSWORD,
    port: process.env.DB_PORT || 5432,
  })

  try {
    // 查询菜单数据，替换成你的实际SQL
    const res = await pool.query('SELECT * FROM daily_menu ORDER BY created_at DESC')
    return res.rows
  } finally {
    // 用完关闭连接池
    await pool.end()
  }
})

2. 前端组件通过useFetch调用这个API：

<template>
  <div class="menu-container">
    <h2>今日餐厅菜单</h2>
    <ul v-if="menu && menu.length">
      <li v-for="dish in menu" :key="dish.id" class="menu-item">
        {{ dish.name }} - {{ dish.price }}
      </li>
    </ul>
    <p v-else>暂无菜单数据</p>
  </div>
</template>

<script setup>
const { data: menu } = await useFetch('/api/menu')
</script>

这种方式符合Nuxt3的设计规范，也能避免插件配置错误的问题，同时更安全。

3. 检查依赖是否安装 #

确保你已经安装了PostgreSQL的客户端依赖：

npm install pg
# 或者用yarn
yarn add pg

内容的提问来源于stack exchange，提问作者Gergő Szabó