如何处理Nuxt SSR错误并显示自定义404 || 500页?

当Nuxt的SSR出现错误时,您如何处理错误?

目前,我正在使用error()处理程序,但在生产环境中不起作用?这是我的Nuxt应用程序的示例。

异步数据

 async asyncData({ store, route, error }) {
    return store.dispatch( NAMESPACES.USERS + ACTIONS.GET_DETAIL, userId ).then(response => ({
      data: response,
    })).catch((e) => {
      error(e)
    })
  } 

错误

  <vis-container>
    <vis-row class="error">
      <vis-col md="8" class="error__component">
        <component :is="errorPage" :error="error.statusCode" />
      </vis-col>

      <vis-col md="8" class="error__contact">
        <p class="error__contact__title">{{ $t('error_page.question') }}</p>
      </vis-col>
    </vis-row>
  </vis-container>
</template>

<script>
export default {
  props: ['error'],
components: {
    NotFound: () => import('@/components/error/NotFound'),
    InternalServerError: () => import('@/components/error/InternalServerError'),
  },
    computed: {
    errorPage() {
      if (this.error.statusCode === 500) {
        return 'InternalServerError'
      }

      return 'NotFound'
    },
  },
}
</script>

宝儿理查德2020/03/24 17:36:46

我认为这篇文章可能对您有用:https : //medium.com/finn-no/hacking-nuxts-404-logic-for-maximum-awesome-and-easy-proxying-e4efaeb03d66

Rather disappointing that Nuxt offers no easy way to do this with SSR, as error.vue is not used when in SSR mode.