Nuxtjs überschreitet die maximale Call-Stack-Größe im Entwicklungsmodus und erhält in der Produktion den Serverfehler 500 anstelle meiner benutzerdefinierten Fehlerseite, wenn eine ungültige URL eingegeben wird

Question

Wenn ich eine URL eingebe, die nicht existiert, erhalte ich manchmal eine benutzerdefinierte Fehlermeldung und meistens einen Serverfehler (Bild)

Dies ist meine 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="Seite nicht gefunden">
      </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"
      {{ $t('notFound.error500') }}
    </h1>
    <NuxtLink class="home-back text-capitalize mb-lg-3" :to="localePath('/')">
    {{ $t('notFound.home') }}
    </NuxtLink>
  </div>

</template>

<script>
Standard exportieren {
  Requisiten: ['Fehler']
}
</script>

<style lang="scss"
//entfernt, um den Code zu minimieren
</style>

Hinweis: 1- trrrrr ist nur eine zufällige Zeichenfolge, die ich in die URL geschrieben habe, um eine nicht vorhandene URL zu demonstrieren 2- Im Entwicklungsmodus erhalte ich manchmal einen benutzerdefinierten 404-Fehler, meistens erhalte ich einen Maximale Aufrufstapelgröße zurückgegeben (Bild)

Meine PWA-Konfiguration:

pwa: {
    Meta: {
      Titel: "Beispiel",
      Autor: "Beispiel",
    },
    icon: { Zweck: "irgendein"
    manifestieren: {
      Anzeige: „standalone“,
      Name: "Beispiel",
      lang: "en",
      useWebmanifestExtension: true,
      theme_color: "#01bac6",
    },
  },

Meine Fragen sind: 1-Warum funktioniert meine benutzerdefinierte Fehlerseite immer nicht?

2- Warum ist der Codefehler 500, obwohl er 404 sein sollte, weil ich mich auf einer Seite befinde, die nicht existiert?

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

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