vue项目报错Uncaught runtime errors的解决方案

更新时间：2024年01月26日 11:08:21 作者：No8g攻城狮

使用vue-cli的vue项目,出现编译错误或警告时,在浏览器中显示全屏覆盖,提示报错Uncaught runtime errors,本文给大家介绍了vue项目报错Uncaught runtime errors的解决方案,需要的朋友可以参考下

一、背景描述

项目本来运行的好好，换了个新的浏览器，新的Chrome浏览器版本号是116.0.5845.97（正式版本）（64位），原来的Chrome浏览器版本是92.0.4515.107（正式版本）（64位），使用vue-cli的vue项目，出现编译错误或警告时，在浏览器中显示全屏覆盖，如下图，以下是开发环境，此报错在生产环境下并不会出现。报错详情如下：

在这里插入图片描述

二、报错原因

通过看控制台，找到关键词webpack

在这里插入图片描述

webpack.config.js 中

当出现编译错误或警告时，被设置了在浏览器中显示全屏覆盖的配置。

在这里插入图片描述

三、解决方案

3.1 只显示错误信息不全屏覆盖

在这里插入图片描述

3.2 取消全屏覆盖

module.exports = {
  devServer: {
    client: {
      overlay: false // 编译错误时，取消全屏覆盖（建议关掉）
    }
  }
}

四、参考资料

在这里插入图片描述

参考资料：https://webpack.docschina.org/configuration/dev-server/#overlay

本文完结！

到此这篇关于vue项目报错Uncaught runtime errors的解决方案的文章就介绍到这了,更多相关vue报错Uncaught runtime errors内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

100行代码理解和分析vue2.0响应式架构
通过100行代码帮助大家理解和分析vue2.0响应式架构的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
Vue组件跨层级获取组件操作
这篇文章主要介绍了Vue组件跨层级获取组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
springboot之springboot与netty整合方案
这篇文章主要介绍了VUE之关于store状态管理核心解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
Vue下拉框加分页搜索功能的实现方法
开发任务中有这样一个需求，下拉框中需要展示超过5000条数据，甚至更多，这数据量直接整个页面卡死了，就想到在下拉框中加分页，下面小编通过实例代码介绍下Vue下拉框加分页搜索功能的实现，感兴趣的朋友一起看看吧
2022-11-11
基于Echarts图表在div动态切换时不显示的解决方式
这篇文章主要介绍了基于Echarts图表在div动态切换时不显示的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue如何接入hls/m3u8的直播视频详解
项目中有一个需求,需要实现直播功能,后端接口返回的是m3u8数据流,下面这篇文章主要给大家介绍了关于Vue如何接入hls/m3u8直播视频的相关资料,需要的朋友可以参考下
2022-07-07
vite+vue3项目解决低版本兼容性问题解决方案(Safari白屏)
这篇文章主要介绍了vite+vue3项目解决低版本兼容性问题（Safari白屏）,使用官方插件 @vitejs/plugin-legacy 为打包后的文件提供传统浏览器兼容性支持,本文给大家介绍的非常详细,需要的朋友可以参考下
2024-03-03
vue源码解析之事件机制原理
这篇文章主要介绍了vue源码解析之事件机制原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
vue input实现点击按钮文字增删功能示例
这篇文章主要介绍了vue input实现点击按钮文字增删功能,涉及基于vue.js的事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2019-01-01
vue 项目打包时样式及背景图片路径找不到的解决方式
今天小编就为大家分享一篇vue 项目打包时样式及背景图片路径找不到的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11