1.如何在開發(fā)環(huán)境讓error.vue模版有效
我們知道在layouts里可以編寫模版頁,錯(cuò)誤頁面的默認(rèn)模版是nuxt-error.vue 位于nuxt源碼的components目錄 不可更改。
如果你想定制就在layouts下創(chuàng)建error.vue怕享。
這時(shí)生成的.nuxt>index 等相關(guān)引用error組件的文件中的錯(cuò)誤頁面組件引用會(huì)改為你自己的編寫的layouts>error.vue文件执赡。
但是你npm run dev會(huì)發(fā)現(xiàn) mmp 無效 還是一堆堆棧信息 為什么？
因?yàn)樵趎uxt源碼中使用了一個(gè)供內(nèi)部debug使用的模塊
如果nuxt.config.js中 debug沒有配置 且還在dev環(huán)境下啟動(dòng) 那么無論你怎么定義錯(cuò)誤頁面 都會(huì)被youch模塊接手 把錯(cuò)誤堆棧信息打印出來 初衷是方便調(diào)試熬粗。
源碼中的這句話 你可以嘗試在nuxt.config.js中定義dev 但是你會(huì)發(fā)現(xiàn) 不好使
大家看下源碼lib>common>options 中的Options.defaults定義就知道了
dev: process.env.NODE_ENV !== 'production',
debug: undefined, // Will be equal to dev if not provided
所以想強(qiáng)制的在dev環(huán)境下 看error的線上表現(xiàn) 可以通過在nuxt.config.js中定義
debug:false,dev:false 來達(dá)到目的
2.錯(cuò)誤級別
ssr里有幾種錯(cuò)誤級別
- ssr服務(wù)端渲染錯(cuò)誤 對應(yīng)servermiddleware
- 前端vue-router錯(cuò)誤 對應(yīng)middleware
- ?業(yè)務(wù)中接收到的錯(cuò)誤搀玖，也就是上面兩級捕捉不到的 比如業(yè)務(wù)場景中的請求錯(cuò)誤需要自己寫error-handler
在error-handler中 你可以使用context.error方法 來把錯(cuò)誤引導(dǎo)到 error.vue組件來顯示
比如文檔中介紹的
隨便寫個(gè)示意 把error到一個(gè)方法里 用ErrorHandler去統(tǒng)一處理
/**
* 錯(cuò)誤處理
* @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;
}
}
}
