文章目录
- 前言
- 操作步骤
- 大纲
- 1.使用Vue自带的报错捕获机制添加报错信息
- 2.在接口报错部分添加相同机制
- 3.把报错信息添加到Vuex中方便全局使用
- 4.添加报错页面备用
- 5.app页面添加if判断替换报错界面
- 效果
- 备注：vue项目中Uncaught runtime errors:怎样关闭
前言
在开发Vue项目中，要求遇到报错显示一个报错页面，而不是把报错信息显示。
操作步骤
大纲
- 使用Vue自带的报错捕获机制添加报错信息
- 在接口报错部分添加相同机制
- 把报错信息添加到Vuex中方便全局使用
- 添加报错页面备用
- app页面添加if判断替换报错界面
1.使用Vue自带的报错捕获机制添加报错信息
main.js
// 设置全局错误处理
app.config.errorHandler = (err) => {// 存储错误信息到Vuex中store.commit('setError', err.message || '未知错误');
}
2.在接口报错部分添加相同机制
catch (error) {console.error('API 请求错误:', error);// 更新 Vuex 错误信息store.dispatch('setError', error.message || '接口请求失败');throw error;}
3.把报错信息添加到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.添加报错页面备用
<!-- ErrorPage.vue -->
<template><div class="error-page"><h2>发生错误</h2><p>{{ message }}</p><p>请稍后再试，出现了问题。</p></div>
</template><script>
export default {name: 'ErrorPage',props: {message: {type: String,default: '未知错误'}}
}
</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判断替换报错界面
<ErrorPage v-if="errorMessage" :message="errorMessage" />
<!-- 其他页面内容 -->
<div v-else class="common-layout">……
</div>
效果
备注：vue项目中Uncaught runtime errors:怎样关闭
使用vue-cli新建的vue项目，当出现编译错误或警告时，在浏览器中显示全屏覆盖，如下图，此报错在生产环境下并不会出现。
通过看控制台，找到关键词webpack
可以明显的看出来是webpack-dev-server弄出来的。
解决办法
在vue.config.js中添加如下配置
module.exports = defineConfig({...devServer: {client: {overlay: false}}
})
备注部分此处参考：https://blog.csdn.net/qq_36877078/article/details/131175355
鸣谢。
