Nuxt3默认错误页面不能用layouts/error.vue覆盖

Question

我创建了一个 layouts/error.vue 文件，我想将其用作我的 Nuxt3 应用程序中的错误页面。

但由于某种原因，默认错误页面每次都会加载。

这是默认的错误页面：

这是我 error.vue 文件中的代码：

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
export default {
  props: ["error"],
};
</script>

到目前为止，我见过或阅读过文档的每个开发人员都将此解释为通过创建文件夹和文件来完成的一件非常简单的事情，所以这可能与我的设置有关。

无论如何，你们中的任何人都可以指出我正确的方向吗？

Answer 1

您在代表 Nuxt 版本 2 的 layouts 文件夹中创建了 error 文件。

对于 Nuxt 3，您需要将其保存在根文件夹中的 app.vue 文件旁边。正如文档所说：

You can customize this error page by adding ~/error.vue in the source directory of your application, alongside app.vue. This page has a single prop - error which contains an error for you to handle.

Nuxt3默认错误页面不能用layouts/error.vue覆盖

Nuxt3 default error page can't be overwritten with layouts/error.vue

javascript

vue.js

vuejs3

tailwind-css

nuxt3