前言

在開發(fā)Vue項(xiàng)目中，要求遇到報(bào)錯(cuò)顯示一個(gè)報(bào)錯(cuò)頁面，而不是把報(bào)錯(cuò)信息顯示。

操作步驟

大綱

1. 使用Vue自帶的報(bào)錯(cuò)捕獲機(jī)制添加報(bào)錯(cuò)信息
2. 在接口報(bào)錯(cuò)部分添加相同機(jī)制
3. 把報(bào)錯(cuò)信息添加到Vuex中方便全局使用
4. 添加報(bào)錯(cuò)頁面?zhèn)溆?/li>
5. app頁面添加if判斷替換報(bào)錯(cuò)界面

1.使用Vue自帶的報(bào)錯(cuò)捕獲機(jī)制添加報(bào)錯(cuò)信息

main.js

// 設(shè)置全局錯(cuò)誤處理
app.config.errorHandler = (err) => {// 存儲(chǔ)錯(cuò)誤信息到Vuex中store.commit('setError', err.message || '未知錯(cuò)誤');
}

2.在接口報(bào)錯(cuò)部分添加相同機(jī)制

catch (error) {console.error('API 請(qǐng)求錯(cuò)誤:', error);// 更新 Vuex 錯(cuò)誤信息store.dispatch('setError', error.message || '接口請(qǐng)求失敗');throw error;} 

3.把報(bào)錯(cuò)信息添加到Vuex中方便全局使用

import { createStore } from 'vuex'
export default createStore({state: {error: null, // 添加 error 信息},mutations: {setError(state, payload) {state.error = payload;}},actions: {setError({ commit }, payload) {commit('setError', payload);}},getters: {getError: (state) => state.error,},
})

4.添加報(bào)錯(cuò)頁面?zhèn)溆?/h4>

<!-- ErrorPage.vue -->
<template><div class="error-page"><h2>發(fā)生錯(cuò)誤</h2><p>{{ message }}</p><p>請(qǐng)稍后再試，出現(xiàn)了問題。</p></div>
</template><script>
export default {name: 'ErrorPage',props: {message: {type: String,default: '未知錯(cuò)誤'}}
}
</script><style scoped>
.error-page {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;text-align: center;background-color: #f8d7da;color: #721c24;
}h2 {font-size: 2rem;
}p {font-size: 1rem;color: #555;
}
</style>

5.app頁面添加if判斷替換報(bào)錯(cuò)界面

<ErrorPage v-if="errorMessage" :message="errorMessage" />
<!-- 其他頁面內(nèi)容 -->
<div v-else class="common-layout">……
</div>

效果

備注：vue項(xiàng)目中Uncaught runtime errors:怎樣關(guān)閉

使用vue-cli新建的vue項(xiàng)目，當(dāng)出現(xiàn)編譯錯(cuò)誤或警告時(shí)，在瀏覽器中顯示全屏覆蓋，如下圖，此報(bào)錯(cuò)在生產(chǎn)環(huán)境下并不會(huì)出現(xiàn)。

通過看控制臺(tái)，找到關(guān)鍵詞webpack

可以明顯的看出來是webpack-dev-server弄出來的。

解決辦法
在vue.config.js中添加如下配置

module.exports = defineConfig({...devServer: {client: {overlay: false}}
})

備注部分此處參考：https://blog.csdn.net/qq_36877078/article/details/131175355

鳴謝。