如何仅为页面应用Nuxt Server Middleware？

方法一：中间件内部直接过滤请求路径 #

这是Nuxt2、Nuxt3通用的方案，在服务器中间件里先判断请求路径，排除静态资源、内置资源、API接口这类非页面请求，只处理目标路径。

示例代码：

// Nuxt2 示例
export default function (req, res, next) {
  // 定义需要排除的路径规则：静态资源、Nuxt内置资源、API接口、图标文件
  const excludePatterns = [/^\/_nuxt\//, /^\/static\//, /^\/api\//, /^\/favicon\.ico$/]
  const shouldSkip = excludePatterns.some(pattern => pattern.test(req.url))

  if (shouldSkip) {
    return next() // 跳过当前中间件，走后续流程
  }

  // 这里写你针对页面请求的处理逻辑
  console.log('处理页面请求:', req.url)
  next()
}

// Nuxt3 示例
export default defineEventHandler((event) => {
  const requestPath = event.node.req.url
  // 排除非页面路径
  if (requestPath.startsWith('/_nuxt/') || 
      requestPath.startsWith('/static/') || 
      requestPath.startsWith('/api/') || 
      requestPath === '/favicon.ico') {
    return
  }

  // 页面请求专属处理逻辑
  console.log('页面请求:', requestPath)
})

方法二：Nuxt3中利用路由匹配精准判断 #

如果需要更精准确认请求是否对应pages目录下的页面，可以借助Nuxt3的路由匹配能力，直接判断请求是否命中页面路由。

示例代码：

export default defineEventHandler(async (event) => {
  const router = useRouter(event)
  const matchedRoute = await router.match(event.node.req.url)

  // 只有匹配到pages定义的路由（存在路由名称）才执行逻辑
  if (matchedRoute?.name) {
    console.log('命中页面路由:', matchedRoute.name)
    // 这里写页面请求的处理逻辑
  }
})

方法三：Nuxt2中结合路由钩子补充判断 #

在Nuxt2里，除了中间件内部过滤，还可以通过路由钩子标记页面请求，再在服务器中间件里读取标记：

1. 在nuxt.config.js中添加路由钩子：

export default {
  router: {
    beforeEach(to, from, next) {
      // 给请求对象添加标记，说明这是页面路由请求
      if (process.server) {
        req.isPageRequest = true
      }
      next()
    }
  }
}

2. 在服务器中间件中判断标记：

export default function (req, res, next) {
  if (!req.isPageRequest) {
    return next()
  }

  // 处理页面请求逻辑
  next()
}

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