如何修复VS Code Live Server打开但浏览器无法加载网页的问题？

1. 调整Live Server的网络配置 #

• 打开VS Code设置（快捷键Ctrl+,），搜索Live Server: Host，将值改为0.0.0.0，确保WSL内的服务能被Windows主机访问
• 检查Live Server: Port设置，确认端口未被占用（可改为5501等其他端口测试）

2. 验证WSL与Windows的网络连通性 #

• 在WSL终端执行hostname -I获取WSL的IP地址
• 在Windows命令提示符中执行ping <WSL_IP>，确认网络能连通
• 若连通失败，在Windows管理员终端执行wsl --shutdown，重启WSL后再测试

3. 确认Live Server的根目录正确 #

• 必须在VS Code中打开包含HTML文件的整个文件夹，而非单独打开单个HTML文件
• 右键点击目标HTML文件，选择Open with Live Server，确保服务器以该文件所在文件夹为根目录启动

4. 排查端口占用情况 #

• 在Windows命令提示符执行netstat -ano | findstr :5500，查看是否有其他进程占用5500端口
• 若存在占用，通过任务管理器结束对应PID的进程，或修改Live Server的端口号

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