nuxt.js - Nuxt layouts/error.vue 在生产构建中不像在开发中那样工作

Question

引用 docs ，我为页面处理错误添加了 layouts/error.vue 。在开发中测试( npm run dev )，一切都按预期工作。但是，当我执行 npm run build 和 npm start 时，当我测试在生产中抛出异常时，不会呈现错误页面。
我正在使用 SSR 但我在文档中没有看到任何表明 layouts/error.vue 不适用于 SSR 或通用站点的内容。有一个类似的 issue reported 。该人为他们的用例做了一个变通方法。但是问题(主错误处理程序被忽略，异常最终记录到控制台而不是呈现错误页面)没有解决。
在开发中，如果我在单击按钮时使用 throw new Error() 抛出测试错误，则会显示错误页面。但是在生产中，错误只会进入控制台，并且不会呈现错误页面。我可以让它在生产中工作而不改变很多其他代码的唯一方法是在 debug: true 中设置 nuxt.config.js 。
另请注意，error.vue 在 404 页的生产中也能完美运行。但是，如果我在来自组件的生产构建中使用 throw new Error，它就不会像在开发中那样工作。
您可以通过使用 npm create nuxt-app <app name> 生成新的 nuxt 应用程序轻松重现这一点。以下是我选择的设置:

将以下内容添加到 layouts/error.vue :

<template>
  <div>
    <h1>You are in layouts/error.vue</h1>
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <pre v-if="error.statusCode !== 404">{{ error }}</pre>
    <nuxt-link to="/">Click to visit Home page</nuxt-link>
  </div>
</template>

<script>
export default {
  props: {
    error: {
      type: [Object, Error],
      default: () => {},
    },
  },
  layout: 'blog', // you can set a custom layout for the error page
}
</script>

然后将 <button @click="throwE">Click to throw error</button> 添加到 components/Logo.vue 并在页面中添加以下脚本:

<script>
export default {
  methods: {
    throwE() {
      throw new Error('Error thrown by button click')
    },
  },
}
</script>

单击开发中的按钮，它按预期工作。单击生产中的按钮，不呈现 error.vue。
文档错了吗？这是一个错误吗？为什么 error.vue 在开发中按预期工作，但在生产构建中抛出错误时却没有？

Answer 1

我怀疑您的问题可以通过将以下内容添加到您的 nuxt.config.js 文件来解决:

generate: {
    fallback: "404.html"
},

或者:

generate: {
    fallback: true
  }

以下网页讨论了您的问题和解决方案:
https://nuxtjs.org/faq/netlify-deployment#how-to-deploy-on-netlify-
https://dev.to/debs_obrien/when-netlify-gives-you-that-404-page-4561
https://github.com/nuxt/nuxt.js/issues/966