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

nuxt.js Vue.js

蛋蛋

2020-03-24

当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>

第3581篇《如何处理Nuxt SSR错误并显示自定义404 || 500页?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
宝儿理查德 2020.03.24

我认为这篇文章可能对您有用: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.

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android