网站群发手机短信,室内设计软件培训,注册qq空间申请,网站建设上海网站制作文章目录 前言操作步骤大纲1.使用Vue自带的报错捕获机制添加报错信息2.在接口报错部分添加相同机制3.把报错信息添加到Vuex中方便全局使用4.添加报错页面备用5.app页面添加if判断替换报错界面 效果备注#xff1a;vue项目中Uncaught runtime errors:怎样关闭 前言
在开发Vue项… 文章目录 前言操作步骤大纲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 --
templatediv classerror-pageh2发生错误/h2p{{ message }}/pp请稍后再试出现了问题。/p/div
/templatescript
export default {name: ErrorPage,props: {message: {type: String,default: 未知错误}}
}
/scriptstyle 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;
}
/style5.app页面添加if判断替换报错界面
ErrorPage v-iferrorMessage :messageerrorMessage /
!-- 其他页面内容 --
div v-else classcommon-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
鸣谢。
