如何在Nuxt 3中用服务端中间件重定义路由（替代Express）

问题概述 #

之前在Nuxt 2中，我通过Express中间件实现路由逻辑，根据URL决定显示Nuxt页面或public目录下的HTML文件，代码如下：

const express = require('express')
const { Router } = require ('express')
const app = express ()
const router = Router()

router.get('*', (req, res, next) => {
   // 自定义路由判断逻辑
   next()
})

app.use(router)
module.exports = app

升级到Nuxt 3后无法使用Express，尝试用h3手动创建路由的方案无效：

import { createApp, createRouter, fromNodeMiddleware } from 'h3';

const app = createApp();
const router = createRouter();


router.get('*', fromNodeMiddleware(async (req, res, next) => {
        // 原逻辑
);

有效解决方案 #

方法一：使用Nuxt 3 内置服务器中间件（推荐） #

Nuxt 3会自动加载server/middleware目录下的所有文件作为服务器中间件，无需手动搭建h3应用。

1. 在项目中创建server/middleware/route-handler.js文件
2. 写入以下代码：

import { join } from 'pathe';
import { exists, readFile } from 'fs/promises';

export default defineEventHandler(async (event) => {
  const requestPath = event.node.req.path;

  // 这里替换成你的路由判断逻辑
  // 示例：匹配所有以/static-html/开头的路径，返回public目录下对应HTML文件
  if (requestPath.startsWith('/static-html/')) {
    // 拼接public目录下的文件路径
    const htmlFilePath = join(process.cwd(), 'public', requestPath.slice(1) + '.html');
    
    // 检查文件是否存在
    if (await exists(htmlFilePath)) {
      const htmlContent = await readFile(htmlFilePath, 'utf-8');
      event.node.res.setHeader('Content-Type', 'text/html');
      return htmlContent;
    }
  }

  // 若不匹配自定义逻辑，继续执行Nuxt默认路由处理
  return;
});

方法二：自定义服务器入口（复杂场景） #

如果需要更灵活的服务器控制，可以创建自定义服务器入口文件，让Nuxt使用你搭建的服务器：

1. 在项目根目录创建server/index.mjs
2. 写入以下代码：

import { createServer } from 'node:http';
import { createNuxt } from 'nuxt/app';
import { join } from 'pathe';
import { exists, readFile } from 'fs/promises';

// 初始化Nuxt实例
const nuxt = await createNuxt({
  dev: process.env.NODE_ENV !== 'production',
  // 可以在这里扩展Nuxt配置
});

await nuxt.ready();

// 创建HTTP服务器
const server = createServer(async (req, res) => {
  const { url } = req;

  // 自定义路由判断逻辑
  if (url === '/custom-public-page') {
    const htmlPath = join(process.cwd(), 'public', 'custom.html');
    if (await exists(htmlPath)) {
      res.setHeader('Content-Type', 'text/html');
      res.end(await readFile(htmlPath, 'utf-8'));
      return;
    }
  }

  // 非自定义路由，交给Nuxt处理
  await nuxt.server.app(req, res);
});

// 启动服务器
server.listen(process.env.PORT || 3000, () => {
  console.log(`Server running on http://localhost:${process.env.PORT || 3000}`);
});

为什么之前的尝试无效 #

Nuxt 3本身已经封装了h3作为底层服务器，手动创建的独立h3应用不会被Nuxt的核心流程整合，因此无法生效。必须通过Nuxt提供的中间件机制或自定义服务器入口来嵌入路由逻辑。

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