XAMPP配置多端口+手机预览的核心是：Apache同时监听多个端口、开放对应端口防火墙权限、手机与电脑同局域网且通过“电脑IP:端口”访问正确DocumentRoot；缺一不可。
直接说结论：XAMPP 配置多端口 + 手机预览，核心不是“加几个端口”，而是让 Apache 同时监听多个端口、开放对应端口的网络访问权限、且手机能通过电脑 IP + 端口号访问到正确的 DocumentRoot。漏掉任一环节，手机就打不开。
修改 httpd.conf 添加监听端口
Apache 默认只监听 80，手机访问电脑 IP 时默认走 80，但你想用 :8080 或 :3000 区分项目，就得显式告诉 Apache “我也要听这个端口”。
- 打开
XAMPP\apache\conf\httpd.conf - 搜索
Listen 80，在它下面新增一行（端口号不能被占用，避开 80、443、1024 以下常见系统端口）：Listen 8080 - 如果还要加更多，继续追加：
Listen 8081、Listen 8888等 - 保存后必须重启 Apache，否则新端口不生效
配置 httpd-vhosts.conf 绑定端口与目录
光监听没用，Apache 还得知道“收到 :8080 的请求，该去哪个文件夹找文件”。这靠虚拟主机（VirtualHost）完成，且必须启用该配置文件。
XAMPP 8.0.30 是一款免费、开源的跨平台 Web 服务器集成包，专为快速搭建本地 PHP 开发环境而设计。该版本核心组件包括：Apache 2.4.56、MySQL 8.0.33、PHP 8.0.30、phpMyAdmin 5.2.1 等。它支持 Windows、Linux 和 macOS 系统，可让开发者在个人电脑上轻松模拟服务器环境，无需复杂配置即可运行 WordPress、Thin
- 确保
httpd.conf中这行已取消注释：Include conf/extra/httpd-vhosts.conf - 编辑
XAMPP\apache\conf\extra\httpd-vhosts.conf，在末尾添加（注意路径用正斜杠或双反斜杠）：<VirtualHost *:8080> ServerName localhost DocumentRoot "C:/Users/yquanmei/ee" <Directory "C:/Users/yquanmei/ee"> Require all granted AllowOverride All </Directory> </VirtualHost> -
DocumentRoot必须是绝对路径，结尾不加斜杠；<Directory>块不可省略，否则手机访问会返回403 Forbidden - 如需多个端口，复制整个
<VirtualHost>块，改端口号和路径即可
手机访问前必须检查的三件事
很多人配完发现手机输 http://192.168.x.x:8080 白屏或连不上，问题几乎都出在这三处：
-
电脑防火墙拦截了该端口：Windows 防火墙默认只放行
80和443。需手动添加入站规则，协议选 TCP，端口填你配的（如8080），作用域设为“任何” -
手机和电脑不在同一局域网：手机必须连的是和电脑相同的 Wi-Fi（不是移动热点、不是不同路由器），且确认电脑 IP 是
192.168.x.x类型（不是169.254.x.x） -
路径权限未放开：Apache 2.4+ 默认禁止所有目录访问。除了
<Directory>里写Require all granted，还要确认httpd.conf中全局<Directory />块没有硬性拒绝（比如残留的Require all denied）
为什么不用改三个 httpd.conf 文件？
早期 XAMPP 版本（如 1.7.x）确实在多个位置有 httpd.conf，但当前主流版本（3.3+）只有一个主配置文件：XAMPP\apache\conf\httpd.conf。所谓“搜到三个”通常是误把备份文件（如 httpd.conf.bak）、子模块配置或旧版残留当真。只改这一个，其他全是干扰项。
真正要动的是两个文件：httpd.conf（加 Listen、开 vhosts 引用）和 httpd-vhosts.conf（定义端口与目录映射）。其余任何“改三个配置文件”的说法，都是过时经验，容易导致配置冲突或 Apache 启动失败。
