Nuxt 3部署后跳转至服务商404页而非自定义error.vue页面原因

我用Nuxt3搭建了个人在线作品集，开发环境下输入无效URL时能正常显示自定义404页面，但部署到线上后，访问不存在的页面却显示托管服务商的默认404页面。

开发环境效果：

部署后效果：

以下是我放在应用根目录的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
},

内容的提问来源于stack exchange，提问作者Problem Child