能否通过Nuxt 3服务器插件重写Nitro静态资源处理逻辑？

问题背景 #

我正在试验Nuxt 3，想了解是否可以重写Nitro运行时的特定行为。Nuxt文档提到可通过服务器插件扩展Nitro运行时行为，但目前相关细节较少。

Nuxt会自动读取~/server/plugins目录下的所有文件并注册为Nitro插件，以此扩展Nitro运行时行为并挂钩生命周期事件。

需求说明 #

当请求静态资源时，Nitro会尝试从<app root>/public/目录读取资源，若未找到则返回404。我希望Nitro在主目录未找到资源时，尝试从<app root>/public/的某个子目录读取，找到则返回资源，否则返回404。

实现思路 #

构建项目后发现，负责处理资源的核心代码块位于.output/server/chunks/node-server.mjs，原逻辑仅遍历主目录下的资源路径查找静态资源。我期望修改资源查找逻辑，在主目录找不到时自动尝试子目录：

原核心代码 #

for (const encoding of encodings) {
  for (const _id of [id + encoding, joinURL(id, "index.html" + encoding)]) {
    const _asset = getAsset(_id);
    if (_asset) {
      asset = _asset;
      id = _id;
      break;
    }
  }
}

修改后的目标逻辑 #

for (const encoding of encodings) {
  for (let _id of [id + encoding, joinURL(id, "index.html" + encoding)]) {
    let _asset = getAsset(_id);

    // 主目录未找到时，尝试subDir子目录
    if (!_asset) {
      _asset = assets['/subDir' + _id]
      _id = '/subDir' + _id
    }

    if (_asset) {
      asset = _asset;
      id = _id;
      break;
    }
  }
}

可行解决方案：通过Nitro服务器插件实现 #

直接修改.output目录下的编译后文件不可靠（每次构建会覆盖），正确做法是通过Nuxt服务器插件拦截请求，自定义资源查找逻辑：

1. 在项目根目录创建server/plugins/asset-fallback.ts（或.js）文件：

import { eventHandler, createError, readAsset, getAsset } from 'nitropack'
import { joinURL, withLeadingSlash, withoutTrailingSlash, parseURL } from 'ufo'

export default eventHandler((event) => {
  // 仅处理GET/HEAD请求
  const allowedMethods = ['GET', 'HEAD']
  if (!allowedMethods.includes(event.req.method || '')) {
    return
  }

  const pathname = parseURL(event.req.url).pathname
  let id = decodeURIComponent(withLeadingSlash(withoutTrailingSlash(pathname)))
  
  // 跳过非法路径请求
  if (!id.startsWith('/') || id.includes('..')) {
    return
  }

  let asset = null
  const encodingHeader = String(event.req.headers["accept-encoding"] || "")
  const EncodingMap = { gzip: ".gz", br: ".br" }
  const encodings = encodingHeader.split(",")
    .map(e => EncodingMap[e.trim()])
    .filter(Boolean)
    .sort()
    .concat([""])

  if (encodings.length > 1) {
    event.res.setHeader("Vary", "Accept-Encoding")
  }

  // 自定义资源查找：先主目录，再子目录
  for (const encoding of encodings) {
    for (const baseId of [id + encoding, joinURL(id, "index.html" + encoding)]) {
      // 尝试主目录
      let _asset = getAsset(baseId)
      let _id = baseId

      // 主目录未找到，尝试指定子目录
      if (!_asset) {
        _id = `/subDir${baseId}`
        _asset = getAsset(_id)
      }

      if (_asset) {
        asset = _asset
        id = _id
        break
      }
    }
    if (asset) break
  }

  if (!asset) {
    // 未找到资源，交给Nitro默认逻辑处理
    return
  }

  // 处理缓存验证逻辑
  const ifNotMatch = event.req.headers["if-none-match"] === asset.etag
  if (ifNotMatch) {
    event.res.statusCode = 304
    event.res.end()
    return
  }

  const ifModifiedSinceH = event.req.headers["if-modified-since"]
  if (ifModifiedSinceH && asset.mtime) {
    if (new Date(ifModifiedSinceH) >= new Date(asset.mtime)) {
      event.res.statusCode = 304
      event.res.end()
      return
    }
  }

  // 设置响应头
  if (asset.type && !event.res.getHeader("Content-Type")) {
    event.res.setHeader("Content-Type", asset.type)
  }
  if (asset.etag && !event.res.getHeader("ETag")) {
    event.res.setHeader("ETag", asset.etag)
  }
  if (asset.mtime && !event.res.getHeader("Last-Modified")) {
    event.res.setHeader("Last-Modified", asset.mtime)
  }
  if (asset.encoding && !event.res.getHeader("Content-Encoding")) {
    event.res.setHeader("Content-Encoding", asset.encoding)
  }
  if (asset.size && !event.res.getHeader("Content-Length")) {
    event.res.setHeader("Content-Length", asset.size)
  }

  // 返回资源内容
  return readAsset(id)
})

2. 关键说明：

• 插件会在Nitro请求处理链中优先执行，拦截静态资源请求
• 复刻了Nitro原生的静态资源查找逻辑，添加了子目录 fallback 逻辑
• 找到资源则直接返回，未找到则交给Nitro默认逻辑返回404
• 无需修改编译后文件，构建后依然有效，符合Nuxt扩展规范

3. 注意事项：

• 将代码中的/subDir替换为实际需要的子目录路径
• 确保public/subDir目录存在且包含对应静态资源
• 该方案可用于解决多站点场景下的静态资源共享问题（如robots.txt、well-known URI等）

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