如何处理 Nuxt 3 博客中的 `Document is empty` 消息并返回 404 状态代码？

2024-03-24 15:12:02

处理 Nuxt 3 博客中 Document is empty 消息时的 404 状态

前言

在使用 Nuxt 3 构建静态和内容驱动的博客时，你可能会遇到 Document is empty 错误/消息的情况，这通常发生在你使用仅填充了前端信息的占位符 Markdown 文件时。虽然错误消息会显示，但请求仍然会返回 200 状态代码，这可能会导致混乱和不一致的 HTTP 响应。本文将详细介绍如何配置 Nuxt 3 博客，使其在出现 Document is empty 错误/消息时返回 404 状态代码。

问题

当使用占位符 Markdown 文件时，如果文件内容为空或只包含前端信息，Nuxt 3 会将其视为有效文件，并返回 200 状态代码。然而，这并不是理想的，因为文件实际上是空的，并且不应提供成功响应。

解决方法

为了解决这个问题，我们需要添加一个自定义中间件，当检测到 Document is empty 错误/消息时，它会返回 404 状态代码。以下是如何实现这一目标的步骤：

添加 check-document-empty 中间件

在你的 nuxt.config.js 文件中，添加以下代码：

export default {
  // ... 其他配置
  // 添加以下代码
  middleware: ['check-document-empty']
}

现在，我们需要创建一个名为 check-document-empty 的中间件：

// middleware/check-document-empty.js
export default async function ({ route, next }) {
  // 获取当前请求的路径
  const path = route.fullPath

  // 检查该路径是否在你的 Markdown 文件中存在
  const exists = await existsFile(`${process.cwd()}/content/${path}/index.md`)

  // 如果文件不存在，返回 404 状态代码
  if (!exists) {
    return next({
      statusCode: 404,
      message: 'Document is empty'
    })
  }

  // 如果文件存在，继续执行
  return next()
}

代码示例

以下示例演示了如何使用 check-document-empty 中间件：

<!-- index.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()

const title = route.meta.title
const description = route.meta.description
</script>

// nuxt.config.js
export default {
  middleware: ['check-document-empty']
}

// middleware/check-document-empty.js
export default async function ({ route, next }) {
  const path = route.fullPath

  const exists = await existsFile(`${process.cwd()}/content/${path}/index.md`)

  if (!exists) {
    return next({
      statusCode: 404,
      message: 'Document is empty'
    })
  }

  return next()
}