Mac上用XAMPP搭建局域网可访问的开发环境，让局域网内其他设备通过域名访问

前几天在Mac上用XAMPP搭了个开发环境，想让局域网里的其他设备也能通过域名访问。本来以为是个简单的事情，结果踩了不少坑，特别是遇到了 mywebsite.localhost 拒绝连接的问题。折腾了一下午总算搞定了，把整个过程记录下来，希望能帮到遇到类似问题的朋友。

一、基础配置：让XAMPP在局域网内可用

1. 先确认XAMPP正常工作

这个步骤很简单，但很重要。打开XAMPP控制面板，启动Apache和MySQL服务，然后在浏览器访问 http://localhost，能看到页面就说明服务正常。

2. 给Mac分配固定IP

局域网内访问需要固定的IP地址，不然每次重启路由器IP变了，其他设备就访问不了了。

在"系统偏好设置 > 网络"里记下当前的IP（比如 192.168.1.100），然后登录路由器管理界面（通常是 192.168.1.1），在DHCP设置里把Mac的MAC地址和IP绑定起来。这样每次设备连接时都会分配同一个IP。

3. 配置Apache监听所有网络接口

默认情况下，XAMPP的Apache只监听本地地址，需要修改配置。

打开终端，编辑主配置文件：

bash 复制代码

sudo nano /Applications/XAMPP/etc/httpd.conf

找到 Listen 指令，改成：

apache 复制代码

Listen 0.0.0.0:80

这样Apache就会监听所有网络接口的80端口。

同时确认虚拟主机配置文件被包含：

apache 复制代码

Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

4. 配置虚拟主机

编辑虚拟主机配置文件：

bash 复制代码

sudo nano /Applications/XAMPP/etc/extra/httpd-vhosts.conf

添加一个虚拟主机配置（假设域名是 mywebsite.local）：

apache 复制代码

<VirtualHost *:80>
    ServerAdmin admin@mywebsite.local
    DocumentRoot "/Applications/XAMPP/htdocs/mywebsite"
    ServerName mywebsite.local
    ServerAlias www.mywebsite.local
    ErrorLog "logs/mywebsite-error_log"
    CustomLog "logs/mywebsite-access_log" common
    <Directory "/Applications/XAMPP/htdocs/mywebsite">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

这里要注意 Require all granted 这行，它允许局域网内的设备访问。

配置完成后，在XAMPP控制面板重启Apache。

5. 配置本机的Hosts文件

编辑本机的hosts文件：

bash 复制代码

sudo nano /etc/hosts

添加一行：

复制代码

192.168.1.100 mywebsite.local

这样在Mac本机上访问 http://mywebsite.local 就能正常工作了。

二、让局域网其他设备也能访问

这部分有好几种方案，我试了几种，最后推荐用路由器DNS方案。

方案一：逐台修改Hosts文件（最原始的方式）

每台要访问的设备都要修改hosts文件：

Windows ：编辑 C:\Windows\System32\drivers\etc\hosts
Mac ：编辑 /etc/hosts
Android/iOS：需要Root或越狱，不推荐

添加同样的记录：

复制代码

192.168.1.100 mywebsite.local

这种方式很麻烦，设备一多就崩溃了。

方案二：路由器配置本地DNS（推荐）

这个方案最省事，配置一次，所有设备都能用。

登录路由器管理界面
找到DNS设置或静态DNS（不同路由器位置不一样）
添加一条记录：域名 mywebsite.local 指向 192.168.1.100
重启路由器

这样所有连接到路由器的设备都能自动解析这个域名。

方案三：使用mDNS/Bonjour（.local域名）

如果域名后缀是 .local，支持Bonjour的设备（iOS、Mac）可以直接访问，不需要额外配置。不过部分Android和Windows设备可能需要安装Bonjour服务。

三、防火墙设置

Mac的防火墙可能会阻止外部访问，需要放行Apache。

打开"系统偏好设置 > 安全性与隐私 > 防火墙"，点击"防火墙选项"，确保 httpd（Apache）在允许列表里。

四、测试和验证

在其他设备的浏览器输入 http://mywebsite.local，如果能看到网站就成功了。

如果访问不了，按下面的步骤排查：

检查Mac的Apache是否在运行
检查防火墙是否放行了80端口
检查路由器的DNS配置是否正确

五、遇到的坑：bamvd.localhost 拒绝连接

配置过程中遇到一个很坑的问题：用 bamvd.localhost 这个域名时，局域网内的设备一直提示拒绝连接。

问题根源

.localhost 是保留域名，系统会强制解析到 127.0.0.1，根本无法通过局域网访问。这是个很容易被忽略的问题。

解决方案

把域名改成其他后缀，比如 .local 或 .test。我改成了 bamvd.local，问题就解决了。

完整排查过程

为了确保万无一失，我按这个流程排查了一遍：

1. 先用IP测试

在其他设备浏览器输入 http://192.168.1.100（Mac的局域网IP）：

如果能访问：说明Apache配置没问题，问题出在域名解析
如果不能访问：说明Apache或防火墙配置有问题

2. 检查Apache配置

确保虚拟主机配置正确：

apache 复制代码

<VirtualHost *:80>
    ServerName bamvd.local
    DocumentRoot "/Applications/XAMPP/htdocs/你的项目目录"
    <Directory "/Applications/XAMPP/htdocs/你的项目目录">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

3. 检查防火墙

暂时关闭防火墙测试，如果能访问了，说明是防火墙的问题。然后在防火墙设置里放行Apache。

4. 检查端口占用

终端执行：

bash 复制代码

sudo lsof -i :80

确认80端口确实被Apache占用，没有被其他程序抢走。

5. 查看日志

实时监控Apache错误日志：

bash 复制代码

tail -f /Applications/XAMPP/logs/error_log

尝试访问网站时，看日志里有没有错误信息。

其他可能的问题

路由器的"AP隔离"或"客户端隔离"功能会导致设备间无法互通，需要在路由器设置里关闭这个功能。

六、总结

整个配置过程总结下来就是：

给Mac分配固定IP
配置Apache监听所有网络接口
配置虚拟主机，注意域名不要用 .localhost
用路由器DNS方案让所有设备都能解析域名
检查防火墙设置
测试访问，有问题看日志