VS Code Live Server项目：同一Wi-Fi下多设备访问localhost方法

一、让手机访问PC端的Live Server服务 #

1. 获取PC的本地IP地址 #

• Windows：打开命令提示符（cmd），输入ipconfig，找到「无线局域网适配器 WLAN」下的IPv4地址（比如192.168.1.105）
• Mac/Linux：打开终端，输入ifconfig（或ip addr），找到WiFi网络对应的inet地址

2. 配置Live Server允许外部访问 #

打开VS Code的设置（快捷键Ctrl+,/Cmd+,）：

• 搜索「Live Server: Host」，将值改为0.0.0.0（表示监听所有网络接口）
• 确认「Live Server: Port」是默认的5500（或你自定义的端口）

3. 手机访问服务 #

确保手机和PC连接同一WiFi，在手机浏览器中输入：http://[你的PC本地IP]:[Live Server端口]，比如http://192.168.1.105:5500

二、处理Geolocation API的权限问题 #

直接用HTTP访问PC IP时，现代浏览器会阻止Geolocation请求（因为非安全上下文），需要做以下调整：

1. 必须由用户交互触发位置请求 #

浏览器禁止自动调用getLocation()，需要添加用户触发的元素，比如在HTML中加入：

<button onclick="getLocation()">获取我的位置</button>
<div id="display"></div>

2. 配置Live Server使用HTTPS（关键） #

生成自签名证书后，在VS Code设置中：

• 搜索「Live Server: Https」，勾选启用
• 搜索「Live Server: Cert」，填入你的证书文件路径（比如C:\certs\cert.pem）
• 搜索「Live Server: Key」，填入你的密钥文件路径（比如C:\certs\key.pem）

重启Live Server后，手机访问地址改为https://[你的PC本地IP]:[端口]，首次访问会提示证书不安全，手动信任后即可正常调用Geolocation API。

三、代码补充说明 #

你的JavaScript代码逻辑没问题，但要确保HTML中有对应的display元素，并且通过用户点击触发getLocation函数，否则无法正常执行。

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