前言

在开发 Nuxt.js 时，当页面出错或接口后台数据返回异常时，页面就会 “直接呈现” 报错的信息。

正常情况下，当页面 404、500 或页面报错时，

前端应该 自动跳转到错误页，而不是直接白屏或显示报错信息。

本文将从 0-1 带您完成一个 error.vue 错误页，承载各种各样的 “错误类型”，

支持接口报错自动触发与自定义手动触发，给用户一个较为良好的体验：

第一步

如果您已经创建过该文件夹（使用过布局模板），可略过创建文件夹这一步。

打开项目根目录，创建 layouts 文件夹（注意不要拼错，否则无效），

在里面再建立一个 error.vue 文件，复制以下代码：

<!--
    跟普通页面一样，自定义想要的错误页面即可
    主要是依靠props中的error对象数据进行判断与自定义
    下面就是给您个示例，照猫画虎即可。
-->

<template>
    <div class="error-box">
        <!-- 404 -->
        <section v-if="error.statusCode == 404">
            <img src="https://img-blog.csdnimg.cn/20210715111039922.png" />
            <h1>{
   
   { error }}</h1>
        </section>
        <!-- END -->

        <!-- 500 -->
        <section v-if="error.statusCode == 500">
            <h1>{
   
   { error }}</h1>
        </section>
        <!-- END -->
        
        <!-- 常用功能 -->
        <div style="height: 30px" />
        <button @click="$router.go(-1)">
            返回上一页
        </button>
        <button @click="$router.go('/')">
            返回首页
        </button>
        <!-- END -->
    </div>
</template>

<script>
export default {
      
      
    props: ['error']
    // ...
}
</script>

<style scoped>
/* 您自定义样式即可 */
.error-box {
      
      
    width: 1080px;
    margin: 0 auto;
    text-align: center;
    padding-top: 200px;
}
</style>

第二步

做好了自定义页面，就差 “触发它” 了。

您随便找个页面，复制以下代码运行起来。

<!-- 
  在 asyncData 中使用 app.context.error 进行调用
  在外部，使用 this.$nuxt.error() 调用
 -->

<template>
  <div>
    <h1>刷新后，模拟 404 错误</h1>
    <button @click="toError()">点击发生系统错误</button>
  </div>
</template>

<script>
export default {
      
      
  asyncData({
       
        app }) {
      
      
    // console.log(app.context)
    // 模拟出错(由于运行直接执行，暂时先注释掉了)
    
    // app.context.error({
      
      
    //   statusCode: 404,
    //   message: '404了，这是自定义文案'
    // })
  },

  methods: {
      
      
    toError() {
      
      
      // 可在任意代码段内使用
      this.$nuxt.error({
      
      
        statusCode: 500,
        message: '点击按钮后，系统发生错误~'
      })
    },
  }
}
</script>

常见问题

• Nuxt.js 默认自带错误处理页面，如果不需要样式美化则直接略过 第一步 操作即可，无需 error.vue，框架默认的页面同样支持传入自定义状态码与文案，如下图所示：
• 注意 layouts 与 error.vue 名称不能拼错（不支持自定义），否则直接无效。
• 当传入 statusCode 状态码时，别小看它，不仅仅用以区分，它还会改变该网站的状态，如下图所示：

SEO

Nuxt.js 最新自定义报错、缺省、404、500 定制化 error.vue（页面、接口报错时自动跳转到该自定义页面）支持自定义文案、状态码等功能，NUXT报错后怎么跳转到自己定义的错误页面去，页面直接报错了怎么办能不能跳转到指定的404页面，Nuxt出现Server error的解决方案!定制 error.vue 错误缺省页，写项目时增加错误提示页面操作，Nuxt.js自定义错误页，错误提示页写项目时增加错误提示页面操作，自定义错误页，nuxtjs 自定义服务端错误页面Server error page。