404页面对于一个网站来说有着重要的作用，用来提醒用户打开的页面不存在，从而跳转到首页或者其他页面引导用户继续访问。
对于nuxtjs的项目要如何设置404页面呢
其实也很简单，只需要在layouts文件夹下新建一个error.vue的文件，文件内通过代码重定向首页就能实现一个友好的404页面，更好的体验就是有一个5秒的倒计时，这样对用户来说不用面对着一个静态页面还需要手动点击跳转。
当然倒计时可以通过setInterval来实现，每隔一秒加1,5秒后跳转，当然前提是需要判断在浏览器端，是否在浏览器端可以通过process.client可以实现。
<template>\n <div class="not-found">\n <img src="@/assets/img/404.png" alt="" width="100%">\n <div class="msg">抱歉，你访问的页面不存在</div>\n <div class="seconds">{{seconds}}秒后将跳转改成首页</div>\n </div>\n</template>\n<script>\nexport default {\ndata(){\n return {\n seconds: 5\n }\n},\n mounted() {\n // 判断是否在客户端\n if (process.client) {\n setInterval(() =>{\n this.seconds = this.seconds - 1\n if(this.seconds == 0) {\n location.href = '/'\n }\n },1000)\n }\n }\n}\n</script>\n<style scoped lang="less">\n.not-found{\n background: #fff;\n height: 100%;\n padding-bottom: 200px;\n .msg,.seconds{\n text-align: center;\n }\n \n}\n</style>上述方法只适用于页面404的情况，也就是如果你访问了一个项目中不存的页面地址，那个nuxt会自动加载error页面，但是对于接口报404或者500的情况此时这种情况就无法实现了，如果接口报500那么nuxt会加载一个默认的server page页面，这个页面样式时错乱的，用户体验不太好。
那么对于接口报错的情况也需要显示error页面要如何实现呢，其实也是可以的，首先需要在拿到接口数据前不要对请求进行拦截，也就在拿到asyncData里面的请求结果后通过code或者其他自定义字段来判断需要显示错误页面，在调用asyncData中的error方法即可，注意error方法需要传入参数,如果没有参数传空即可，这个时候就可以实现接口报错显示错误页面了，当然你也可以针对不对的错误定制不同的错误页面。
async asyncData({ $axios, route, error }) {\n let [detail] = await Promise.all([getDetailApi(route.params.id)])\n\n if (detail.code === 1) {\n error({ statusCode: 404, message: 'Post not found' })\n return false;\n }\n return {\n detailData: detail.data.result,\n currPage: route.params.id,\n };\n },