当输入无效 URL 时，Nuxtjs 在开发模式下超出了最大调用堆栈大小，并且在生产中出现服务器错误 500，而不是我的自定义错误页面

Question

当我输入不存在的 URL 时，有时会收到自定义错误，大多数情况下会收到服务器错误（图片）

这是我的 error.vue 页面：

<template>
  <div class="error-page">
    <div class="page-not-found" v-if="error.statusCode === 404">
      <div class="image">
        <img src="/images/page-not-found.png" alt="page not found">
      </div>
      <h1 class="text-capitalize font-weight-bold">
        {{ $t('notFound.error404') }}
      </h1>
      <p class="info my-3 my-lg-4">
        {{ $t('notFound.error404Info') }}
      </p>
    </div>
    <h1 class="text-capitalize font-weight-bold"  v-else-if="error.statusCode === 500">
      {{ $t('notFound.error500') }}
    </h1>
    <h1 class="text-capitalize font-weight-bold"  v-else>
      {{ $t('notFound.error500') }}
    </h1>
    <NuxtLink class="home-back text-capitalize mb-lg-3" :to="localePath('/')">
    {{ $t('notFound.home') }}
    </NuxtLink>
  </div>

</template>

<script>
export default {
  props: ['error']
}
</script>

<style lang="scss" scoped>
//removed to minimize the code
</style>

注意：1- trrrrr 只是我在 URL 中写入的随机字符串，用于演示不存在的 URL 2-在开发模式下，有时我会收到自定义的 404 错误，大多数时候我会收到 Maximum call stack size returned 错误（图片）

我的 PWA 配置：

pwa: {
    meta: {
      title: "example",
      author: "example",
    },
    icon: { purpose: "any" },
    manifest: {
      display: "standalone",
      name: "example",
      lang: "en",
      useWebmanifestExtension: true,
      theme_color: "#01bac6",
    },
  },

我的问题是：1-为什么我的自定义错误页面始终不起作用？

2- 为什么代码错误 500，而应该是 404，因为我进入了一个不存在的页面？

Answer 1

最后，我找到了问题的根源，这是我在请求未满足时捕获错误的方式

问题产生方式：

asyncData(context) {
        return context.app.$api.fetchSinglePage(context.params.slug)
        .then(response => {
            return {
                page: response.content
            }
        })
        .catch(e => context.error(e)) //This line causes the problem
    }

将其更改为：

asyncData(context) {
    return context.app.$api.fetchSinglePage(context.params.slug)
      .then(response => {
        return {
          page: response.content
        }
      })
      .catch(e =>{
        context.error({ statusCode: 404 }) //this is how I solved it
      })
  },

来源：https://github.com/nuxt/nuxt .js/issues/6294#issuecomment-526902792

我还是不知道为什么会出现这个问题