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 文件旁邊。 正如文檔所說：

您可以通過在應用程序的源目錄中添加 ~/error.vue 和 app.vue 來自定義此錯誤頁面。 這個頁面只有一個 prop - error ，它包含一個你要處理的錯誤。