XAMPP多端口配置与Source-Map启用教程

本文详解了在XAMPP环境下实现Apache多端口（如8080、8081）监听并确保浏览器正确加载SourceMap的关键配置逻辑：不仅需在httpd.conf中同步添加Listen指令和严格匹配端口的VirtualHost块，还必须启用mod_headers模块，并在对应VirtualHost内通过Header set SourceMap精确指定.map文件的可访问路径；三者——端口监听、虚拟主机路由、SourceMap响应头及其指向的物理路径——必须严丝合缝对齐，否则即使JS文件正常加载，Chrome也会因缺失合法SourceMap头或返回404而无法解析调试信息，真正难点不在开多个端口，而在构建端到端的路径信任链。

Apache怎么监听多个端口并让SourceMap正常加载

直接说结论：XAMPP默认只监听 80 端口，要支持多端口（比如 8080、8081）且让浏览器正确加载 source-map 文件，必须同时改两处——Apache配置 + 响应头设置。否则即使文件存在，Chrome 会因缺少 SourceMap-HTTP-Header 拒绝解析。

在 httpd.conf 中添加额外 Listen 和 VirtualHost

别只加 Listen 8080 就以为完事了。Apache 需明确知道该端口由哪个虚拟主机响应，否则请求会被丢弃或路由到默认站点。

打开 XAMPP\apache\conf\httpd.conf，在已有 Listen 80 下方追加：

Listen 8080
Listen 8081

再滚动到底部，加入独立的 块（注意端口号需与 Listen 一致）：

<VirtualHost *:8080>
    DocumentRoot "C:/xampp/htdocs/myapp"
    <Directory "C:/xampp/htdocs/myapp">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

• 每个新端口都要配一个独立 ，不能复用同一块配置
• DocumentRoot 路径必须是绝对路径，Windows 下用正斜杠或双反斜杠，单反斜杠会报错
• 如果启用 .htaccess，确保 AllowOverride All 已开，否则 source-map 的重写规则可能失效

如何让 Apache 返回 SourceMap-HTTP-Header

浏览器只认响应头里的 X-SourceMap 或标准的 SourceMap（注意大小写），而 Apache 默认不发这个头。靠前端构建工具（如 Webpack）加 header 不可靠——它只对开发服务器生效，XAMPP 是静态服务，header 必须由 Apache 注入。

在对应 块内添加：

Header set SourceMap "/js/app.js.map"

或者更稳妥地按文件后缀匹配（推荐）：

<FilesMatch "\.js$">
    Header set SourceMap "/js/%{REQUEST_FILENAME}.map"
</FilesMatch>

• 实际路径要和 JS 文件同级或按构建输出结构填写；%{REQUEST_FILENAME} 是 Apache 变量，不能直接拼字符串，建议先写死路径调试
• 确保启用了 headers_module：检查 httpd.conf 中 LoadModule headers_module modules/mod_headers.so 未被注释
• Chrome 120+ 已弃用 X-SourceMap，只识别 SourceMap（首字母大写，无横线）

为什么 localhost:8080 能访问但 source-map 仍 404

常见原因不是端口没开，而是路径映射断了。浏览器拿到 SourceMap 响应头后，会自动发起一次 GET 请求去加载那个路径，这个请求走的是当前页面协议+域名+端口，跟原始 JS 文件位置无关。

• 比如页面是 http://localhost:8080/index.html，JS 引入