1.如何在开发环境让error.vue模版有效
我们知道在layouts里可以编写模版页,错误页面的默认模版是nuxt-error.vue 位于nuxt源码的components目录 不可更改。
如果你想定制就在layouts下创建error.vue。
这时生成的.nuxt>index 等相关引用error组件的文件中的错误页面组件引用会改为你自己的编写的layouts>error.vue文件。
但是你npm run dev会发现 mmp 无效 还是一堆堆栈信息 为什么？
因为在nuxt源码中使用了一个供内部debug使用的模块
image.png
image.png
如果nuxt.config.js中 debug没有配置 且还在dev环境下启动 那么无论你怎么定义错误页面 都会被youch模块接手 把错误堆栈信息打印出来 初衷是方便调试。
image.png
源码中的这句话 你可以尝试在nuxt.config.js中定义dev 但是你会发现 不好使
大家看下源码lib>common>options 中的Options.defaults定义就知道了
dev: process.env.NODE_ENV !== 'production',
debug: undefined, // Will be equal to dev if not provided
所以想强制的在dev环境下 看error的线上表现 可以通过在nuxt.config.js中定义
debug:false,dev:false 来达到目的
2.错误级别
ssr里有几种错误级别
- ssr服务端渲染错误 对应servermiddleware
- 前端vue-router错误 对应middleware
- �业务中接收到的错误，也就是上面两级捕捉不到的 比如业务场景中的请求错误需要自己写error-handler
在error-handler中 你可以使用context.error方法 来把错误引导到 error.vue组件来显示
比如文档中介绍的
随便写个示意 把error到一个方法里 用ErrorHandler去统一处理
/**
* 错误处理
* @param {*} context
* @param {*} error
*/
const errorHandler = (ContextError, error) => {
if (error) {
switch (error.statusCode) {
case 401:
ContextError({
statusCode: 401,
message: 'You need back to login again'
})
break;
case 500:
ContextError({
statusCode: 500,
message: 'it\'s a innner wrong'
})
break;
default:
ContextError({
statusCode: 100,
message: 'unknown error'
})
break;
}
}
}
