<p>当我输入不存在的 URL 时，有时会收到自定义错误，大多数情况下会收到服务器错误（图片）</p> <p>这是我的 <code>error.vue</code> 页面：</p> <pre class="brush:php;toolbar:false;"><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></pre> <p><strong>注意：1- <code>trrrrr</code> 只是我在 URL 中写入的随机字符串，用于演示不存在的 URL 2-在开发模式下，有时我会收到自定义的 404 错误，大多数时候我会收到 <code>Maximum call stack size returned</code> 错误（图片）</strong></p> <p>我的 PWA 配置：</p> <pre class="brush:php;toolbar:false;">pwa: { meta: { title: "example", author: "example", }, icon: { purpose: "any" }, manifest: { display: "standalone", name: "example", lang: "en", useWebmanifestExtension: true, theme_color: "#01bac6", }, },</pre> <p>我的问题是：1-为什么我的自定义错误页面始终不起作用？</p> <p>2- 为什么代码错误 500，而应该是 404，因为我进入了一个不存在的页面？</p>

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
      })
  },