Vue CLI 5 的 devServer.proxy 默认不代理 WebSocket，必须在代理规则中显式配置 ws: true；若漏配则静默失败，且前端需用完整 ws://location.host/路径 构造连接，不可用相对路径或直连后端地址。
Vue CLI 5 的 devServer.proxy 默认不代理 WebSocket 请求，除非显式启用 ws: true，且必须配合正确的 URL 构造方式，否则会静默失败。
WebSocket 代理必须显式开启 ws: true
Vue CLI 5 底层使用 http-proxy-middleware@2.x，它默认只处理 HTTP 方法（GET/POST 等），ws 选项是独立开关，不随 changeOrigin 或路径匹配自动生效。
-
ws: true必须写在对应代理规则对象内，不是devServer顶层配置 - 若同时代理 HTTP 和 WS，需为同一前缀配置两套规则（或共用，但需确保目标支持双协议）
- 常见错误：只配了
'/ws': { target: 'ws://xxx', changeOrigin: true }却漏掉ws: true→ 连接直接报DOMException: The URL is invalid
前端连接 URL 必须用 ws:// + location.host + 代理路径
浏览器 WebSocket 构造函数不识别相对路径，也不能直接传代理 key（如 '/ws/chat'），必须拼出完整可访问的 ws 地址。
- 正确写法：
new WebSocket(`ws://${location.host}/ws/chat`) - 错误写法：
new WebSocket('/ws/chat')（触发 DOMException）或new WebSocket('ws://backend-host/ws/chat')（绕过代理，跨域） - 代理路径（如
/ws）必须严格匹配请求 URL 的开头，且不能带多余斜杠（^/ws/和^/ws匹配行为不同）
HTTP 与 WebSocket 代理不能混用同一 target 协议
如果后端 HTTP 接口走 https://api.example.com，而 WebSocket 走 wss://api.example.com，不能共用一个 target 字符串 —— http-proxy-middleware 会拒绝协议不一致的转发。
- 必须分开配置：
'/api': { target: 'https://api.example.com', changeOrigin: true }和'/ws': { target: 'wss://api.example.com', ws: true, changeOrigin: true, secure: false } -
secure: false仅用于开发环境跳过自签名证书校验，生产环境不可用 - 若后端 WebSocket 服务监听的是非标准端口（如
ws://localhost:9001），target必须包含端口号，且确保该端口未被防火墙拦截
调试时启用 logLevel: 'debug' 查看真实转发行为
浏览器 Network 面板看不到 WebSocket 代理的真实目标地址，仅显示 ws://localhost:8080/xxx；必须靠日志确认是否命中规则、是否完成升级握手。
- 在代理规则中加入
logLevel: 'debug'，启动服务后观察终端输出 - 关键日志线索：
[HPM] Upgrading to WebSocket表示握手成功；[HPM] Error occurred while trying to proxy request表示代理失败 - 若看到
WebSocket upgrade rejected，大概率是后端未返回101 Switching Protocols，检查后端是否真正支持 WebSocket 协议
最易忽略的一点：Vue CLI 5 的代理只在开发服务器运行时生效，构建后的静态文件不包含任何代理逻辑。上线部署时，WebSocket 连接必须直连真实地址或由 Nginx 反向代理接管，不能依赖 devServer 配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
