在nuxt3中自定义400 和 500 错误页面，以及在页面和 API 中触发这些错误。

项目结构

├── layouts/
│   └── error.vue         # 自定义错误页面
├── pages/
│   ├── index.vue         # 首页
│   ├── trigger400.vue    # 用于触发 400 错误的页面
│   └── trigger500.vue    # 用于触发 500 错误的页面
├── server/
│   └── api/
│       ├── throw400.js   # 模拟 400 错误的 API
│       └── throw500.js   # 模拟 500 错误的 API

1. 自定义错误页面 (layouts/error.vue)

<template>
  <div class="error-page">
    <h1 v-if="error?.statusCode === 400">400 - Bad Request</h1>
    <h1 v-else-if="error?.statusCode === 500">500 - Internal Server Error</h1>
    <h1 v-else>{{ error?.statusCode || 'Error' }} - Something went wrong</h1>
    <p>{{ error?.statusMessage || 'An unexpected error occurred.' }}</p>
    <NuxtLink to="/">Go back to the homepage</NuxtLink>
  </div>
</template>

<script setup>
const error = useError(); // 捕获错误信息
</script>

<style scoped>
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  background-color: #f5f5f5;
  color: #333;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 2rem;
}
</style>

2. 首页 (pages/index.vue)

<template>
  <div>
    <h1>Welcome to Nuxt 3</h1>
    <NuxtLink to="/trigger400">Trigger 400 Error</NuxtLink> | 
    <NuxtLink to="/trigger500">Trigger 500 Error</NuxtLink>
  </div>
</template>

3. 触发 400 错误的页面 (pages/trigger400.vue)

<script setup>
import { createError } from 'h3';

const triggerError = () => {
  throw createError({
    statusCode: 400,
    statusMessage: 'Bad Request: Invalid input',
  });
};
</script>

<template>
  <div>
    <h1>Trigger 400 Error</h1>
    <button @click="triggerError">Click to trigger 400 Error</button>
  </div>
</template>

4. 触发 500 错误的页面 (pages/trigger500.vue)

<script setup>
import { createError } from 'h3';

const triggerError = () => {
  throw createError({
    statusCode: 500,
    statusMessage: 'Internal Server Error: Something went wrong',
  });
};
</script>

<template>
  <div>
    <h1>Trigger 500 Error</h1>
    <button @click="triggerError">Click to trigger 500 Error</button>
  </div>
</template>

5. 模拟 API 返回错误 (server/api/throw400.js)

export default defineEventHandler(() => {
  throw createError({
    statusCode: 400,
    statusMessage: 'Bad Request: This is a simulated API error',
  });
});

测试方法

访问 /api/throw400 会返回 400 错误的响应。

6. 模拟 API 返回错误 (server/api/throw500.js)

export default defineEventHandler(() => {
  throw createError({
    statusCode: 500,
    statusMessage: 'Internal Server Error: This is a simulated API error',
  });
});

测试方法

访问 /api/throw500 会返回 500 错误的响应。

7. 运行和测试

启动项目

运行项目：

npm run dev

测试触发错误

1. 测试页面错误：

   • 访问 /trigger400，点击按钮，显示自定义的 400 - Bad Request 页面。
   • 访问 /trigger500，点击按钮，显示自定义的 500 - Internal Server Error 页面。

2. 测试 API 错误：

   • 访问 /api/throw400，返回 JSON 格式的 400 错误。
   • 访问 /api/throw500，返回 JSON 格式的 500 错误。

最终效果

• 当触发 400 或 500 错误时，自定义的 error.vue 会捕获错误并显示适当的状态码和消息。
• 页面和 API 错误均会被统一管理，用户体验一致。