code-server容器webpack的ws无法连接解决方法

本文介绍了如何在前端开发环境中,通过配置webpack-dev-server和code-server,利用WebSocket实现客户端浏览器的实时代码热加载。WebSocketURL在webpack.config.js中的devServer.client部分设置,Forwardeduri用于代理到正确的WebSocket端点。

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

TLDR

通过指定client的wsrul去连接ws
devServer.client.webSocketURL = ‘wss://<Forwarded uri>/ws’

拓扑

拓扑图

1、code-server: 用于编写代码、启动webpack dev-server 服务;[https://<domain>:8001]
2、webpack: 用于浏览dev-server服务;[https://<domain>:8001/proxy/8080/]
3、ws: 当有文件改动后,用于c端浏览器热加载、重载。[wss://<domain>:8001/proxy/8080/ws]

Forwarded uri

Forwarded uri

webpack.config.js

  devServer: {
    client: {
        webSocketURL: 'wss://<domain>:8001/proxy/8080/ws',
      },

client browser

client

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值