Vue中设置报错页面和“Uncaught runtime errors”弹窗关闭

文章目录

前言

在开发Vue项目中,要求遇到报错显示一个报错页面,而不是把报错信息显示。

操作步骤

大纲

  1. 使用Vue自带的报错捕获机制添加报错信息
  2. 在接口报错部分添加相同机制
  3. 把报错信息添加到Vuex中方便全局使用
  4. 添加报错页面备用
  5. app页面添加if判断替换报错界面

1.使用Vue自带的报错捕获机制添加报错信息

main.js

js 复制代码
// 设置全局错误处理
app.config.errorHandler = (err) => {
    // 存储错误信息到Vuex中
    store.commit('setError', err.message || '未知错误');
}

2.在接口报错部分添加相同机制

js 复制代码
catch (error) {
    console.error('API 请求错误:', error);
    // 更新 Vuex 错误信息
    store.dispatch('setError', error.message || '接口请求失败');
    throw error;
  } 

3.把报错信息添加到Vuex中方便全局使用

js 复制代码
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.添加报错页面备用

vue 复制代码
<!-- 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判断替换报错界面

vue 复制代码
<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中添加如下配置

js 复制代码
module.exports = defineConfig({
	...
	devServer: {
    client: {
      overlay: false
    }
  }
})

备注部分此处参考:https://blog.csdn.net/qq_36877078/article/details/131175355

鸣谢。

相关推荐
蓝婷儿36 分钟前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐37 分钟前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠41 分钟前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农41 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛1 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵1 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6221 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9491 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
唐叔在学习2 小时前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr2 小时前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js