---
title: "error.vue"
description: "error.vue 文件是你的 Nuxt 应用中的错误页面。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/directory-structure/error"
---
# error.vue

> error.vue 文件是你的 Nuxt 应用中的错误页面。

在应用程序的生命周期中，某些错误可能会在运行时意外出现。在这种情况下，我们可以使用 `error.vue` 文件覆盖默认的错误文件，并以友好的方式显示错误。

```vue [error.vue]
<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps<{ error: NuxtError }>()
</script>

<template>
  <div>
    <h1>{{ error.status }}</h1>
    <NuxtLink to="/">返回首页</NuxtLink>
  </div>
</template>
```

::note
尽管它被称为“错误页面”，但它并不是一个路由，不应放在你的 `~/pages` 目录中。出于同样的原因，你不应在此页面中使用 `definePageMeta`。话虽如此，你仍然可以在错误文件中使用布局，方法是使用 [`NuxtLayout`](https://nuxt.zhcndoc.com/docs/3.x/api/components/nuxt-layout) 组件并指定布局名称。
::

错误页面只有一个 prop —— `error`，它包含了供你处理的错误信息。

`error` 对象包含以下字段：

```ts
interface NuxtError {
  status: number
  fatal: boolean
  unhandled: boolean
  statusText?: string
  data?: unknown
  cause?: unknown
  // 旧版/已弃用的 `status` 等价字段
  statusCode: number
  // 旧版/已弃用的 `statusText` 等价字段
  statusMessage?: string
}
```

如果你的错误中有自定义字段，它们将会丢失；你应该将它们赋值给 `data`：

```ts
throw createError({
  status: 404,
  statusText: '页面未找到',
  data: {
    myCustomField: true,
  },
})
```


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.