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

Question

参考文档，我添加layouts/error.vue了一个页面处理错误。在开发 ( npm run dev) 中对此进行测试，一切都按预期进行。但是，当我这样做npm run build，然后npm start，该错误页面是不是当我测试的生产抛出异常呈现。

我正在使用，SSR但我在文档中没有看到任何建议不适layouts/error.vue用于SSR通用站点的内容。有一个类似的问题报告。该人为他们的用例做了一个变通方法。但是问题（主错误处理程序被忽略，异常最终记录到控制台而不是呈现错误页面）没有解决。

在开发中，如果我通过throw new Error()单击按钮引发测试错误，则会显示错误页面。但是在生产中，错误只会进入控制台，并且不会呈现错误页面。我可以让它在生产中工作而不改变很多其他代码的唯一方法是debug: true在nuxt.config.js.

另请注意，error.vue对于 404 页，它也可以在生产中完美运行。但是，如果我throw new Error从组件进行生产构建，它就不会像在开发中那样工作。

您可以通过使用npm create nuxt-app <app name>. 以下是我选择的设置：

将以下内容添加到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