如何让手机访问电脑本地的前端服务器网页（Vite等前端项目）

要让手机访问电脑上运行的前端开发服务器（比如 Vite、Webpack Dev Server、http-server 等），核心原理是让手机和电脑处于同一局域网，并让服务器监听局域网的 IP 地址。下面是完整步骤和常见问题解决方法。

不同的开发服务器默认只监听 localhost（127.0.0.1），需要改为监听 0.0.0.0（所有网络接口）。

工具 / 框架	如何允许局域网访问
Vite	默认支持。启动时自动显示 Network 地址，或运行 `npm run dev -- --host`，或在项目的 vite.config.js 文件中，你可以添加一个 server 配置，将 host 设置为 '0.0.0.0'。这样，你的服务就会监听所有网络接口，包括局域网和公网地址。例如：`import { defineConfig } from 'vite'; export default defineConfig({ server: { host: '0.0.0.0' } });`
Create React App	默认支持。启动后控制台会显示局域网地址，如 `http://192.168.1.100:3000`
Webpack Dev Server	在配置中添加 `host: '0.0.0.0'`（或在 `package.json` 的 `scripts` 中加 `--host 0.0.0.0`）
http-server	运行时加参数：`http-server -a 0.0.0.0`
Next.js	运行 `npm run dev -H 0.0.0.0` 或在 `package.json` 中加 `-H 0.0.0.0`
Angular CLI	`ng serve --host 0.0.0.0`

示例（Vite）：

bash 复制代码

npm run dev -- --host

或：

js 复制代码

import { defineConfig } from 'vite'; 
export default defineConfig({ 
	server: { host: '0.0.0.0' } 
});

控制台会输出类似：

复制代码

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.100:5173/

Windows：

macOS：

Linux (Ubuntu)：

bash 复制代码

sudo ufw allow 3000  # 以端口3000为例

如果能正常打开，说明成功。

如果你的网页需要调用摄像头、地理位置等 API，浏览器可能强制要求 HTTPS。
解决办法 ：
- 使用内网穿透工具（如 ngrok）提供 HTTPS 地址。
- 或者在手机上临时访问 http:// 版本（部分 iOS 默认允许 http，但某些功能受限）。
- iOS 可尝试关闭"自动检测网站是否支持 HTTPS"等实验性选项。

如果你和手机不在同一个网络（比如电脑在公司，手机用流量），可以使用内网穿透工具：

这些工具会自动处理防火墙、HTTPS 等问题，适合临时远程演示。

场景	命令
Vite 允许局域网	`npm run dev -- --host`
Webpack Dev Server	在配置中加 `host: '0.0.0.0'`
获取电脑 IP（Win）	`ipconfig`
获取电脑 IP（Mac/Linux）	`ifconfig` 或 `ip addr`
临时关闭 Windows 防火墙（测试）	`netsh advfirewall set allprofiles state off`

按照以上步骤操作，绝大多数情况都能顺利用手机访问电脑上的前端页面。如果仍遇到问题，请提供你使用的具体工具和错误现象，我可以进一步帮你分析。