VS Code如何实现多人协作 让协作者共同查看HTML站点live preview

完全可以实现多人同时查看实时预览的需求，此前仅单用户可访问，核心原因是默认配置下Live Preview服务仅绑定本地回环地址、端口未对协作方开放，以下是两类可落地的方案：

• 方案1：基于VS Code官方扩展的轻量协作方案
  不需要额外部署服务器，适合临时小范围协作：
  1. 所有参与协作的人员，在VS Code中安装官方的Live Preview、Live Share两款扩展
  2. 协作发起方（主机）打开Live Preview扩展设置，找到Live Preview: Host IP配置项，将默认值127.0.0.1修改为0.0.0.0后保存配置
  3. 主机正常启动Live Preview，在VS Code终端面板切换到「端口」标签页，找到Live Preview占用的运行端口（默认端口为3000，端口冲突时会自动顺延，以扩展启动时的提示为准），将该端口的访问权限设置为「协作人员可访问」
  4. 其他协作者通过Live Share加入会话后，可直接在自己的端口列表中找到被转发的预览端口，点击即可打开实时预览页面，主机侧修改代码后，所有协作者的预览页都会同步更新
• 方案2：服务器托管式共享预览方案
  适合长期团队协作、需要固定预览地址、不依赖编辑会话的场景：
  1. 准备一台可公网/内网访问的服务器，将项目代码托管到服务器上，使用Nginx、serve等静态资源服务启动站点，服务配置为监听0.0.0.0地址，同时放开对应端口的防火墙访问规则
  2. 本地VS Code安装SFTP类同步扩展，配置本地编辑保存后自动将文件同步到服务器的项目目录
  3. 所有协作者直接访问服务器对应的服务地址，即可查看最新的预览效果。如果需要代码修改后的热更新效果，可以直接在服务器上启动项目对应的前端开发服务（如Vite、Webpack Dev Server），同样配置监听0.0.0.0并放开端口，即可实现所有人访问时的实时热更预览，不会出现单用户访问限制

注意：如果是包含后端接口的全栈项目，需要同步将后端服务的端口做权限开放/转发，否则预览页面会出现接口请求失败的问题。

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