如何在Nuxt 3的/server目录中集成Express.js？

问题场景 #

想要在Nuxt3的/server目录中集成Express.js，但现有代码无法正常运行，目标是访问/api/auth时返回{ message: 'Authentication successful' }的JSON响应。原尝试代码如下：

const express = require('express');
const app = express();

// 解析JSON请求的中间件
app.use(express.json());

// 定义API路由
app.get('/api/auth', (req, res) => {
  return res.status(200).json({ message: 'Authentication successful' });
});

// 启动Express服务器
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

问题原因 #

原代码直接启动了独立的Express服务器，和Nuxt3内置的Nitro引擎服务端口冲突，且未将Express集成到Nuxt3的服务体系中，导致路由无法被Nuxt3识别。

解决方案 #

1. 安装依赖

确保已安装Express：

npm install express
# 或使用 yarn/pnpm
yarn add express
pnpm add express

2. 在Nuxt3中挂载Express中间件

在Nuxt3的/server/middleware目录下创建express.global.ts（或.js）文件，将Express作为全局中间件挂载到Nitro引擎：

import express from 'express'

// 初始化Express实例
const expressApp = express()
// 启用JSON解析中间件
expressApp.use(express.json())

// 定义你的Express路由
expressApp.get('/api/auth', (req, res) => {
  res.status(200).json({ message: 'Authentication successful' })
})

// 将Express转换为Nitro兼容的中间件
export default fromNodeMiddleware((req, res) => {
  return new Promise((resolve) => {
    expressApp(req, res, resolve)
  })
})

3. 启动项目测试

启动Nuxt3项目后，访问http://localhost:3000/api/auth，即可得到预期的认证成功响应。

说明 #

• Nuxt3的/server目录基于Nitro引擎，无需手动启动Express服务器，Nitro会统一管理端口和请求分发。
• 使用fromNodeMiddleware可以将Node.js风格的中间件（如Express）适配为Nitro兼容的格式。

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