为什么我的 Nuxt 应用程序重定向到我的托管提供商的 404 页面而不是我的自定义 error.vue 页面？

Question

我使用 Nuxt 3 创建了我的个人在线作品集，当我故意在开发环境中输入无效 URL 时，会显示我的自定义 404 页面。但是，在部署我的网站后，当我故意在 URL 中键入不存在的页面时，它会显示我的托管提供商的 404 页面。

开发环境：

部署后：

以下代码是我的应用程序 ROOT 部分中的

error.vue

文件：

<script setup>
     const error = useError();

     const statusCode = error.value.statusCode;

     if (statusCode === 404 || statusCode === '404') {
         error.value.message = "Whoops! The page you're looking for doesn't exist. Might I suggest we go back home..."
     }
 </script>

 <template>
     <NuxtLayout name="404">
         <section class="error-section">
             <div class="error-block">
                 <h1>{{ statusCode }}</h1>
                 <p>{{ error.message }}</p>
             </div>

             <RouterLink class="btn btn-primary" to="/" aria-label="click to go back to the home page">Go back home</RouterLink>
         </section>
     </NuxtLayout>
</template>

我在我的

app.vue

中尝试了以下代码，希望在发生 404 时能够将我定向到自定义错误页面。但是，以下代码阻止我完全构建应用程序。

<script setup>
     import { useError } from '#app'

     const error = useError()

     if (error.statusCode) {
         return <error.vue />
     }
</script>

根据之前提出的一些类似问题，我尝试在我的

nuxt.config

文件中添加以下代码：

generate: {
     fallback: true
},

Answer 1

我在同一家托管公司Hostinger和相同的框架Nuxt 3中遇到了同样的问题，我尝试了互联网上的许多解决方案，但它们不起作用。但是，我尝试从托管控制面板本身更改 404 页面，并放置一个空的 HTML 页面，它起作用了！

我的解决步骤：

1. 打开托管网站仪表板。

2. 选择网站 > 错误页面

3. 选择您想要的错误页面[我选择了404]并单击编辑按钮

4. 选择“编辑 HTML”选项，只需输入一个空的 html 代码（如下面的屏幕截图所示），然后单击“保存”按钮。