vue-cli如何关闭Uncaught error的全屏提示
更新时间：2024年04月27日 08:39:38 作者：田八
这篇文章主要介绍了vue-cli如何关闭Uncaught error的全屏提示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue-cli关闭Uncaught error的全屏提示
在使用vue-cli开发项目的时候，如果代码抛出异常了，那么就会出现一个全屏的提示框
长下面这样：
经过一段时间的排查发现是webpack的问题，排查方式就是打开控制台，看这个框的一些属性，通常会有一些关于这个技术的关键词
例如这个：
可以很明显的看到是webpack-dev-server弄出来的，那么直接去找对应的配置就好了，过程就是这样的
该配置项的链接在这里：https://webpack.docschina.org/configuration/dev-server/#overlay
所以我们现在只需要在项目的vue.config.js中加上如下配置就可以了：
module.exports = defineConfig({
// 省略其他配置...
devServer: {
client: {
overlay: false,
},
}
})
vue中vue-cli项目各种报错
假如有以上报错，首先看下index.html有没有这句
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
是限制资源获取：限制网页当中一系列的资源获取的情况，从哪里获取，请求发到哪个地方
把他删除，基本上就已经解决所有问题，如果不行往下看，比较次的战略，不建议，最好从源头处理
sockjs.js报错
解决办法
1.找到/node_modules/sockjs-client/dist/sockjs.js
2.在1620行，注释掉self.xhr.send(payload);这一行，然后就可以解决了
[WDS] Disconnected报错
解决办法
1.找到\node_modules\@vue\cli-service\node_modules\webpack-dev-server\client\index.js
2.在172行，注释掉log.error('[WDS] Disconnected!');这一行，然后就可以解决了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue+animation实现翻页动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
Driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库，本文主要介绍了Vue使用driver.js做引导页，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要为大家详细介绍了如何利用Vue3实现一个可左右滑动操作组件，文中的示例代码讲解详细，对我们学习Vue有一定帮助，感兴趣的可以学一下2022-11-11
这篇文章主要介绍了vue中pc移动滚动穿透问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
本文介绍了基于Vue和iView的文件分片上传技术,通过将文件拆分成多个小块并逐块上传,解决了大文件上传时的诸多问题,如上传速度慢、超时和网络中断等,它还展示了如何实现分片上传的进度显示、错误处理和断点续传等功能,感兴趣的朋友跟随小编一起看看吧2025-01-01
这篇文章主要介绍了Vue errorHandler异常捕获,需要的朋友可以参考下2023-10-10
本篇文章主要介绍了vue.js如何更改默认端口号8080为指定端口的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了vue3使用flv.js播放flv直播流的相关资料,详细描述了安装flv.js和编写HTML、JavaScript代码的过程,包括在页面关闭时销毁播放器的操作,需要的朋友可以参考下2025-05-05
这篇文章主要为大家详细介绍了vue3封装轮播图组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
vue 项目往往会搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度集成，让构建单页面应用变得易如反掌。这篇文章主要介绍了vue 项目地址去掉 #的方法,需要的朋友可以参考下2018-10-10
最新评论