在本地开发场景中，经常需要让同一套项目同时支持PC端和移动端的不同访问需求，XAMPP作为常用的集成开发环境，可以通过配置多端口的方式实现移动端适配，无需额外搭建复杂的服务器环境。
配置前准备
首先需要确保XAMPP已经正常安装，并且Apache服务可以正常启动。打开XAMPP控制面板，点击Apache对应的Config按钮，找到httpd.conf配置文件，这是Apache的核心配置文件，多端口的配置主要在这里完成。
步骤一：新增监听端口
在httpd.conf文件中，找到Listen配置项，默认情况下会有一行Listen 80，表示Apache监听80端口。我们需要在下方新增需要监听的端口，比如移动端适配使用8080端口，新增代码如下：
# 原有监听端口 Listen 80 # 新增移动端适配端口 Listen 8080
保存文件后，先不要重启Apache，还需要完成后续的目录配置。
步骤二：配置端口对应的项目目录
继续在httpd.conf文件末尾，新增虚拟主机配置，将8080端口绑定到移动端适配的项目目录。假设移动端项目放在D:/xampp/htdocs/mobile目录下，配置代码如下：
<VirtualHost *:8080>
# 服务器名称，可自定义
ServerName localhost:8080
# 移动端项目根目录
DocumentRoot "D:/xampp/htdocs/mobile"
# 目录权限配置
<Directory "D:/xampp/htdocs/mobile">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
如果是PC端项目使用80端口，也可以按照同样的格式配置对应的目录，实现不同端口指向不同项目版本。
步骤三：重启服务并验证
保存所有修改的配置文件，回到XAMPP控制面板，先停止Apache服务，再重新启动。启动成功后，打开PC端浏览器访问http://localhost，会指向默认的80端口项目；在移动端设备或者PC端模拟移动端环境下，访问http://192.168.0.1:8080（这里的192.168.0.1替换为你的本地局域网IP），就可以访问到移动端适配的项目内容。
常见问题排查
- 如果重启Apache失败，检查新增的端口是否被其他程序占用，可以更换其他未被占用的端口重新配置。
- 如果访问端口提示403禁止访问，检查
Directory配置中的权限是否正确，确保Require all granted已经添加。 - 如果移动端无法访问，检查防火墙是否允许Apache通过，或者局域网内设备是否和开发机处于同一网段。
代码示例：移动端适配简单页面
可以在D:/xampp/htdocs/mobile目录下创建index.html文件，写入以下移动端适配的基础代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端适配页面</title>
<style>
body {
margin: 0;
padding: 20px;
font-size: 16px;
}
.container {
max-width: 750px;
margin: 0 auto;
}
h1 {
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>移动端适配版本页面</h1>
<p>这是通过XAMPP多端口配置访问的移动端项目内容</p>
</div>
</body>
</html>