XAMPP多端口配置及移动端适配教程

本文详解了XAMPP中多端口配置与移动端适配的本质区别与协同实践：XAMPP仅作为本地服务器环境，不参与也不影响移动端适配，后者完全依赖前端代码（如viewport设置、rem动态计算和媒体查询）；而多端口配置则需手动修改httpd.conf添加Listen指令、启用并正确配置httpd-vhosts.conf实现按端口路由到不同项目目录，同时必须注意Apache 2.4+的权限语法（Require local）及index.php跳转陷阱——掌握这两套独立又共存的机制，才能高效搭建并调试多语言、多终端兼容的本地开发环境。

XAMPP 本身不参与移动端适配，它只是本地 Web 服务器环境；移动端适配完全由前端代码（HTML/CSS/JS）控制。多端口配置和移动端适配是两件事，但可以共存——你用不同端口跑不同项目（比如一个日版、一个中文版），每个项目各自做 viewport、rem、媒体查询等适配即可。

修改 httpd.conf 添加监听端口

Apache 必须明确知道要监听哪些端口，否则请求根本进不来。Windows/mac 路径略有差异，但逻辑一致：

• 打开 E:\XAMPP\apache\conf\httpd.conf（Windows）或 /Applications/XAMPP/xamppfiles/etc/httpd.conf（macOS）
• 找到 Listen 80 这一行，在下方新增你要的端口，比如：
  Listen 8080
Listen 8081
• 确保这些端口没被其他程序占用（netstat -ano | findstr :8080 或 macOS 用 lsof -i :8080 检查）
• 别删掉 Listen 80，否则 localhost 默认访问会失效

启用并配置 httpd-vhosts.conf 虚拟主机

光开监听端口不够，Apache 还得知道每个端口该把请求路由到哪个目录。这靠 httpd-vhosts.conf 实现，但默认是禁用的：

• 确认 httpd.conf 中这行已取消注释：
  Include conf/extra/httpd-vhosts.conf
• 打开 conf/extra/httpd-vhosts.conf，在文件末尾添加类似结构（注意路径用正斜杠或双反斜杠，避免转义错误）：
  

  
      ServerName localhost
      DocumentRoot "E:/XAMPP/htdocs/mobile-jp"
      
          Options Indexes FollowSymLinks
          AllowOverride All
          Require local
      
  

• 每个 块必须有独立的 权限声明，Require local 比旧式 Allow from all 更安全且兼容 Apache 2.4+
• 如果想让 localhost 仍能访问默认项目，也要为 *:80 显式配一个 ，否则可能 403

移动端适配要自己写，XAMPP 不提供自动支持

配置完端口后，你在 http://localhost:8080 打开的页面，是否适配手机，只取决于你 HTML 里有没有这行：

其他适配手段也一样：

• rem 基准需 JS 动态设置 document.documentElement.style.fontSize，XAMPP 不干涉执行
• 媒体查询（@media (max-width: 768px)）由浏览器解析，和端口无关
• 如果你在某个端口下测试时发现样式错乱，问题一定出在 HTML/CSS/JS，而不是 XAMPP 配置
• 注意：XAMPP 自带的 index.php 会跳转到 /dashboard/，若你用子目录做移动端项目，务必删掉或重命名根目录下的 index.php，否则所有端口都可能被劫持跳转

最容易被忽略的是权限模型切换——Apache 2.4+ 强制使用 Require 指令，但很多老教程还在抄 Order Deny,Allow，导致 500 错误；还有人改了端口却忘了开 httpd-vhosts.conf 的 Include，结果端口监听了，请求却全被路由到默认 htdocs 目录。这两点不检查清楚，再多端口也白搭。

终于介绍完啦！小伙伴们，这篇关于《XAMPP多端口配置及移动端适配教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！