VS Code Remote SSH中Blazor WebAssembly热重载失效问题求助

一、固定热重载WebSocket端口 #

dotnet watch默认使用随机端口进行热重载的WebSocket通信，VS Code Remote SSH不会自动转发随机端口，因此需要手动指定固定端口：

• 方式1：修改项目根目录下的Properties/launchSettings.json，在对应profile中添加环境变量：

  "profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": false,
      "applicationUrl": "http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_WATCH_RELOAD_PORT": "5001",
        "ASPNETCORE_WATCH_BROWSER_RELOAD_PORT": "5002"
      }
    }
  }
  

• 方式2：启动时直接指定环境变量：

  ASPNETCORE_WATCH_RELOAD_PORT=5001 ASPNETCORE_WATCH_BROWSER_RELOAD_PORT=5002 dotnet watch run --no-launch-browser
  

二、在VS Code中手动转发端口 #

1. 打开VS Code左侧的「远程资源管理器」
2. 在当前SSH连接的「端口」面板中，点击「添加端口」
3. 分别添加以下转发规则：
   • 远程端口：5000（应用主端口），本地端口：5000
   • 远程端口：5001（热重载WebSocket端口），本地端口：5001
   • 远程端口：5002（浏览器重载通知端口），本地端口：5002

三、启动并验证 #

1. 执行指定端口的启动命令（或通过launchSettings.json启动）
2. 在本地浏览器访问http://localhost:5000
3. 修改任意Blazor组件代码并保存，查看终端是否出现[dotnet watch] Hot reload of changes succeeded.的提示，同时浏览器是否自动刷新页面

内容的提问来源于stack exchange，提问作者Echo