【实践】不小心写了一个BUG, 让我对 Vue DevServer有了更深刻的理解

同步更新 微信公众号【爱写代码的小任】 欢迎关注

1. 背景

在上篇文章 手把手教你开发WebSocket(Vue + SpringBoot) 之后，
这边经过近两个月的加班, 项目终于上线了。
突然发现 webSocket地址 在生产和开发环境下是不同的两个地址（一个是静态配置，一个是动态配置)。
这就引发了我想要以一种更优雅的方式来配置一个websocket地址, 于是就和朋友开始了调整。

2. 调整过程

2.1 调整 server 地址为动态

 let currentDomain = window.location.host
 let uri = `ws://${currentDomain}/${process.env.VUE_APP_BASE_API}/websocket/${token}`

这样确实临时解决了问题。
当我代码提交到gitlab代码仓库之后，小伙伴把代码拉取下来之后， 却怎么启动不起来， 一直报错

node:events:492
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at TCP.onStreamRead (node:internal/stream_base_commons:217:20)
Emitted 'error' event on Socket instance at:
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -54,
  code: 'ECONNRESET',
  syscall: 'read'
}

Node.js v18.17.1
 ELIFECYCLE  Command failed with exit code 1.

然后调试服务就直接终止了， 项目也因此一直启动不起来

2.2 错误分析

上面出现的问题困扰了几个人，几天… 通过重新下载依赖，升级依赖等能想到的办法都试了，就始终不行。

最后逼着自己看了下 webpack-devServer使用、运行流程、实现原理、常用配置项， 反复琢磨

最后了解到是 devServer 这个东西是靠 webSocket机制来触发代码变更，通过发送websocket消息来实现浏览器刷新的， 下图是一个一个大概的效果

而我们的websocket 算是重连了他那个Socket机制， 直接导致调式程序终止了

我们通过打印出来开发环境环境里面的变量，发现地址跟上图里面的webSocket地址是同一个地址，

    let currentDomain = window.location.host
    let uri = `ws://${currentDomain}/${process.env.VUE_APP_BASE_API}/websocket/${token}`
    console.log(currentDomain,uri)

这个时候就想明白了，我们代码的会重新创建一个webSocket连接， 导致他内置的那个 websocket 服务就断开了， 这个时候 调试服务 无法正常获取到webSocket， 就会出现上面的那个错误。

2.3 问题解决

通过改良代码之后， 发现完整解决问题

  let currentDomain = window.location.host
  let uri = `ws://${currentDomain}/${process.env.VUE_APP_BASE_API}/websocket/${token}`
    // console.log(currentDomain,uri)
  if (process.env.NODE_ENV === 'development') {
      uri = `${process.env.VUE_APP_SOCKET_BASE_API}/${token}`
      // console.log('uri',process.env)
  }

通过在开发环境下增加一个判断是否是开发环境， 同时在配置文件中配置一个自己的socket地址

// 消息通知
VUE_APP_SOCKET_BASE_API = 'ws://192.168.1.100:8280/websocket'

3. 总结

经过此次调整， 让我对 devServer的理解，直接提升了一个层级，后面有时间再细细研究 devServer的源码。

最后，感谢小伙伴们的帮助和支持。愿大家 2024 充实，快乐~

关注我，实时获取我的更新动态，和我一起讨论