为什么vue.js 开启debug模式后,websocket里面收不到后端的推送?

66 阅读1分钟

问题: 前端: vue.js pnpm run dev 启动后,在浏览器调试工具里面,ws tab里面看不到任何后端的推送

image.png

但是程序正常启动或者只启动后端,手动启动浏览输入后端的地址+端口,是可以获得websocket的推送的。

原因:前端调式模式时候,需要.env.development.local文件,里面的overwrite 了.env文件的内容。 关键是

# 本地环境修改配置,请复制当前文件,并重命名为  .env.development.local
VITE_BASE_URL=/api/pc
VITE_WEBSOCKET_URI=/api/pc/ws
VITE_DOCS_URI=/docs


;.env.development.local
; VITE_WEBSOCKET_HOST=192.168.2.63
; VITE_WEBSOCKET_PORT=8000
; VITE_WEBSOCKET_PROTOCOL=ws
# VITE_DOCS_URI=/docs

VITE\_WEBSOCKET\_HOST=192.168.3.11
VITE\_WEBSOCKET\_PORT=5173

app: address: :5173 # default :8000 address里面的端口一定要和VITE_WEBSOCKET_PORT一样

image.png

如图所示,这样在命令行 pnpm run dev --host,选择带有IP地址的哪一个,比如和VITE_WEBSOCKET_HOST一样,就会收到websocket的推送