<p>当我输入不存在的 URL 时，有时会收到自定义错误，大多数情况下会收到服务器错误（图片）</p> <p>这是我的 <code>error.vue</code> 页面：</p> <pre class="brush:php;toolbar:false;">&lt;template&gt; &lt;div class=&quot;error-page&quot;&gt; &lt;div class=&quot;page-not-found&quot; v-if=&quot;error.statusCode === 404&quot;&gt; &lt;div class=&quot;image&quot;&gt; &lt;img src=&quot;/images/page-not-found.png&quot; alt=&quot;page not found&quot;&gt; &lt;/div&gt; &lt;h1 class=&quot;text-capitalize font-weight-bold&quot;&gt; {{ $t('notFound.error404') }} &lt;/h1&gt; &lt;p class=&quot;info my-3 my-lg-4&quot;&gt; {{ $t('notFound.error404Info') }} &lt;/p&gt; &lt;/div&gt; &lt;h1 class=&quot;text-capitalize font-weight-bold&quot; v-else-if=&quot;error.statusCode === 500&quot;&gt; {{ $t('notFound.error500') }} &lt;/h1&gt; &lt;h1 class=&quot;text-capitalize font-weight-bold&quot; v-else&gt; {{ $t('notFound.error500') }} &lt;/h1&gt; &lt;NuxtLink class=&quot;home-back text-capitalize mb-lg-3&quot; :to=&quot;localePath('/')&quot;&gt; {{ $t('notFound.home') }} &lt;/NuxtLink&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { props: ['error'] } &lt;/script&gt; &lt;style lang=&quot;scss&quot; scoped&gt; //removed to minimize the code &lt;/style&gt;</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: &quot;example&quot;, author: &quot;example&quot;, }, icon: { purpose: &quot;any&quot; }, manifest: { display: &quot;standalone&quot;, name: &quot;example&quot;, lang: &quot;en&quot;, useWebmanifestExtension: true, theme_color: &quot;#01bac6&quot;, }, },</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
      })
  },