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