vue项目，chrome控制台出现报错 [WDS] Disconnected!

最新推荐文章于 2023-10-31 11:29:50 发布
最新推荐文章于 2023-10-31 11:29:50 发布
阅读量1.4w 收藏 4
点赞数 4
CC 4.0 BY-SA版权
文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42089654/article/details/87632309
本文详细解析了在Vue项目开发过程中遇到的[WDS]Disconnected!错误，并提供了具体的解决方案。该问题通常由全局代理设置不当导致，需将localhost更改为127.0.0.1来解决。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在写vue项目中，控制台中一直报[WDS] Disconnected!错误

这是因为用了全局代理，所以一直要把localhost:改成127.0.0.1 ，

解决方案：

config--->index.js中找到host：

把localhost替换为127.0.0.1

chrome浏览器起不来项目，火狐浏览器报错[WDS] Disconnected!
weixin_42371145的博客
11-30 651
vue页面中报错 [WDS] Disconnected! 原因： 因为用了全局代理软件，所以需要将 config/index.js中 {host:localhost}改为 {host: 127.0.0.1}重启项目即可
webpack源码解析四
vv_bug
07-12 1706
前言 我们接着前面的文章webpack源码解析二继续往下探索webpack的配置，demo的github地址：https://github.com/913453448/webpack-demo.git。 DevServer webpack的devServer配置主要是针对webpack/**webpack-dev-server跟webpack/webpack-dev-middleware**的配置，因为webpack-dev-server依赖webpack-dev-middleware。 我们首先在我们的因
Vue报错，[WDS] Disconnected!
AsBefore麦小兜
05-25 1283
错误内容： 刷新页面控制台报 [WDS] Disconnected！不影响代码运行。 解决： 将vue.config.js中 devServer: { host: '127.0.0.1', }, 不需要重新启动，刷新页面问题解决。 解释： 因为用了全局代理软件，所以一直要把host:改成127.0.0.1 ...
解决Vue2中控制台报错 [WDS] Disconnected! 问题
Mr.小灰狼_随笔
07-19 1471
解决Vue2中控制台报错 [WDS] Disconnected! 问题 Vue2 项目打开控制台时发现如下报错 ： [WDS] Disconnected! client?9556:172 其实并没有对项目运行本身造成什么实质性的影响，但是一条红色的提示摆在那里确实不太好看，还是把他给解决掉吧。
[WDS] Disconnected报错
weixin_47108306的博客
02-15 3285
[WDS] Disconnected！报错解决方法
vue-cli中出现这个错误[WDS] Disconnected!解决！！！
blinH的博客
11-02 4307
当控制台出现这个错误时，虽然不影响程序的正常运行，但是看着还是让人不舒服，不过不要担心，解决办法很容易，打开Application，点开localstorage，然后将loglevel:webpack-dev-server复制在key上，将SILENT复制在Value上，然后刷新重新运行就行了，如第二张图所示 ...
打印window--uni {}[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()length: 1name: "propertyIsEnumerable"arguments: （…）caller: （…）[[Prototype]]: ƒ ()[[Scopes]]: Scopes[0]toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: （…）get __proto__: ƒ __proto__()set __proto__: ƒ __proto__() Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …} chunk-vendors.js:5835 [WDS] Disconnected!markerObj.on('click', () => { console.log('window--uni', uni, window); // console.log(marker, '000'); // 将数据转为字符串 const message = JSON.stringify({ type: 'markerClick', title: marker.title }); window.parent.postMessage(message, '*'); // 通过uni.postMessage发送数据 // uni.postMessage({ // data: JSON.stringify(message) // 发送字符串 // }); });为什么在uniapp的 hybrid/html下面有一个map.html，在map.html中引入了<body> <div id="map-container"></div> <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"> </script> <script> window._AMapSecurityConfig = { securityJsCode: 'cf331d54f67e306ca5c0b17f7122d559' }; </script> <script src="https://webapi.amap.com/maps?v=2.0&key=f3323c24769b10828db07f07c0fcec0d&plugin=AMap.MarkerCluster"> </script>，然后点击无法获取到 uni.postMessage
最新发布
08-09
通过Chrome远程调试（Android）或Safari Web Inspector（iOS）查看日志。 - **真机运行测试** **HBuilderX真机运行** > **控制台** 查看原生层错误： ``` [Webview] Uncaught ReferenceError: uni is not ...
[WDS] Disconnected解决方法
yan的秘密基地
03-17 1万+
Vue项目出现这个错误：[WDS] Disconnected！ 其实并没有对项目运行本身造成什么实质性的影响，但是一条红色的提示摆在那里确实不太好看，还是把他给解决掉吧 在网上看好多人说需要将 config/index.js中 {host:localhost} 改为 {host: 127.0.0.1} 但是我用起来并没有奏效，就另外找了一种解决方法： 打开 Application->LocalStorage，在key上添加loglevel:webpack-dev-server，在Value上添加SI
uniapp出现Invalid Host/Origin header，[WDS] Disconnected!（解决办法）
逍遥的博客
10-31 1692
在devServer: 添加 “disableHostCheck”: true。再manifest.json源码视图找到h5。
控制台一直报错， [WDS] Disconnected!
马优晨
05-22 3万+
控制台一直报错， [WDS] Disconnected! ，别担心，这里我告诉你解决方案： （1）方案： 在你的webpack配置文件里面找到devServer，然后配置这个 （2）参考地址： https://github.com/webpack/webpack-dev-server/issues/851 （3）原因： win10默认设置的ipv6的优先级高于ipv4，所以把localho...
谷歌浏览器一直报错， [WDS] Disconnected!
qq_36899949的博客
04-11 226
默认设置的ipv6的优先级高于ipv4，所以把localhost解析到ipv6去了（这里主要因为项目使用了代理服务软件解析问题）各种解决办法都是不行，这才是真正的解决方案，上代码！99.9999999999%，解决问题。
[WDS] Disconnected!&vue同时连接服务器和本地jar包
weixin_44468194的博客
06-17 432
WDS问题和Vue前端同时链接本地jar包和服务器的方法 这个解决方法是将vue.config.js的host改为127.0.0.1(本机) 第二个问题的解决方法是将host改为0.0.0.0
vue中报错， [WDS] Disconnected!解决方法
热门推荐
weixin_43961899的博客
09-03 4万+
vue页面中报错 [WDS] Disconnected! 原因： 因为用了全局代理软件，所以需要将 vue.config.js中 {host:localhost}改为 {host: 127.0.0.1}刷新页面即可
vue项目无法启动，谷歌浏览器报：您与此网站之间建立的连接不安全，实际是cdn服务器过期
花椒和蕊的博客
12-21 5309
昨天下午遇到一个问题，来的非常突然，中午前项目还是正常的，下午午休后打开电脑准备码代码的时候发现项目在谷歌浏览器里运行不了了。 真的是不知道问题在哪，不知道从何百度，我花了好几个小时百度搜索 我大概猜测的方向是，什么证书过期了，导致谷歌chrome浏览器报错。网上很多文章说是ssl证书过期了，其实不是，我这个项目并没有安装ssl证书，但是我一开始不知道，跟着教程在谷歌浏览器里重置之类的，全都不起作用。 然后又搜索了很多关于http和https协议的文章，大概原因是谷歌浏览器把所有HTTP标示为不安
解决VUE [WDS] DISCONNECTED 错误
weixin_52936828的博客
06-24 2170
在运行项目的时候会出现一下情况 解决方式： 在vue.config.js文件中找到devServer,添加 Headers:{ 'Access-Control-Allow-Origin':'*' }, hotOnly:false, disableHostCheck:true 出现原因：win10默认设置的ipv6的优先级高于ipv4，所以把localhost解析到ipv6去了（这里主要因为项目使用了代理服务软件解析问题） 参考链接：https...
[WDS]Disconnected!
Galileons的博客
10-22 539
vue页面控制台报错 ：[WDS] Disconnected! 我用的vue版本是2.6.11,在package.json中查看vue版本 百度了很多，我才发现是之前vscode打开了很多文件，应该是多个项目占用了相同的端口号，那么相同的端口号是无法再运行其他项目的，所以需要修改端口号 解决的办法：在vue.config.js文件中添加自定义的端口号，避免重复（默认端口号为8080） ...
vue组件build failed,vue组件命名
Janeisme3L的博客
12-27 472
做测试的时候报错 index.js?bed3:161 [WDS] Errors while compiling. Reload prevented. errors @ index.js?bed3:161 onmessage @ socket.js?57b2:41 EventTarget.dispatchEvent @ sockjs.js?3600:170 eval @ sockjs.js?360...
vue.js devtools控制台报错
04-01
### Vue.js DevTools 控制台报错解决方案 当使用 Vue.js 开发时，如果发现 Vue.js DevTools 中存在控制台报错的情况，可能是由于多种原因引起的。以下是可能的原因及其对应的解决方案： #### 1. **Vue 配置未启用开发者工具** 在某些情况下，默认配置可能会禁用开发者的调试功能。可以通过手动设置 `Vue.config.devtools` 来强制开启开发者工具支持[^1]。 ```javascript // main.js 文件中添加以下代码 Vue.config.devtools = true; ``` 此操作可以确保 Vue 实例能够被 Vue.js DevTools 正确检测到并连接。 --- #### 2. **版本兼容性问题** 随着 Vue 和其生态系统的快速发展，不同版本之间可能存在不兼容的问题。例如，较旧的 Vue 版本可能无法与最新版的 Vue.js DevTools 插件正常工作[^2]。 - 如果正在使用 Vue 3，则需确认已安装适用于 Vue 3 的 Vue.js DevTools 版本。 - 对于 Vue 2 用户，请确保插件版本与其匹配。 可以在 Chrome Web Store 或官方文档中查找适合当前项目的 Vue.js DevTools 版本。 --- #### 3. **Vue 应用未能正确加载** 有时即使启用了开发者工具，也可能因为应用本身存在问题而导致 Vue.js DevTools 提示 “Vue.js is not detected”。这通常是因为项目构建过程中出现问题或缺少必要的依赖项[^3]。 ##### 常见情况： - **Node Modules 缺失**：尝试重新安装依赖包以修复潜在问题。 ```bash npm install ``` - **生产环境打包文件不可调试**：如果运行的是经过优化后的生产模式（production mode），则需要切换回开发模式来允许调试。 修改启动命令为开发模式： ```bash npm run serve ``` --- #### 4. **浏览器缓存干扰** 浏览器缓存可能导致新更改的内容未及时生效，从而引发异常行为。清除浏览器缓存或将页面刷新多次可帮助解决问题。 --- #### 5. **第三方扩展冲突** 其他浏览器扩展程序可能会影响 Vue.js DevTools 的正常使用。建议暂时关闭不必要的扩展测试是否存在冲突。 --- 通过以上方法逐一排查，大多数 Vue.js DevTools 控制台报错问题都可以得到有效解决。 --- ###
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值