如何在Nuxt 3的特定URL下渲染public目录中的HTML文件？

Nuxt 3 实现方式 #

方法1：使用路由规则（Route Rules） #

在nuxt.config.ts中添加路由规则，直接将目标路径指向public下的静态HTML文件：

export default defineNuxtConfig({
  routeRules: {
    // 替换/custom-page为你需要匹配的实际路径
    '/custom-page': { static: '/page.html' }
  }
})

用户访问/custom-page时，Nitro服务器会直接返回public/page.html的内容，跳过Nuxt的页面渲染流程。

方法2：自定义服务器中间件 #

1. 在server/middleware目录下创建文件（如static-html.ts）：

import { readFileSync } from 'fs'
import { join } from 'path'

export default defineEventHandler((event) => {
  // 匹配目标路径
  if (event.node.req.url === '/custom-page') {
    const filePath = join(process.cwd(), 'public', 'page.html')
    const htmlContent = readFileSync(filePath, 'utf-8')
    event.node.res.setHeader('Content-Type', 'text/html')
    return htmlContent
  }
})

2. 该中间件会在每个请求到达时触发，匹配到指定路径后直接返回静态HTML内容，不触发Nuxt页面渲染。

Nuxt 2 实现方式 #

方法1：使用服务器中间件 #

1. 在server/middleware目录下创建static-html.js：

const fs = require('fs')
const path = require('path')

export default function (req, res, next) {
  if (req.url === '/custom-page') {
    const filePath = path.join(__dirname, '../../public/page.html')
    fs.readFile(filePath, 'utf8', (err, data) => {
      if (err) {
        res.statusCode = 500
        res.end('Error loading HTML file')
        return
      }
      res.setHeader('Content-Type', 'text/html')
      res.end(data)
    })
    return
  }
  next()
}

2. Nuxt 2会自动加载server/middleware目录下的文件，无需额外配置。

方法2：修改服务器配置 #

在nuxt.config.js中直接配置服务器中间件：

const fs = require('fs')
const path = require('path')

export default {
  server: {
    middleware: [
      function (req, res, next) {
        if (req.url === '/custom-page') {
          const filePath = path.join(__dirname, 'public/page.html')
          fs.readFile(filePath, 'utf8', (err, data) => {
            if (err) return next()
            res.setHeader('Content-Type', 'text/html')
            res.end(data)
          })
          return
        }
        next()
      }
    ]
  }
}

注意事项 #

• 确保public/page.html文件存在，路径配置正确。
• 如需匹配多个路径，可将判断逻辑改为正则表达式匹配模式。
• Nuxt 3中优先推荐使用路由规则的方式，实现更简洁。

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