Apache监听多个端口并使SourceMap正常加载，需同时配置Listen指令与对应VirtualHost块，并在VirtualHost内启用mod_headers模块、添加Header set SourceMap指令指定正确.map文件路径，三者必须严格匹配浏览器请求路径。
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
再滚动到底部，加入独立的 <VirtualHost *:8080> 块（注意端口号需与 Listen 一致）：
<VirtualHost *:8080>
DocumentRoot "C:/xampp/htdocs/myapp"
<Directory "C:/xampp/htdocs/myapp">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
- 每个新端口都要配一个独立
<VirtualHost>，不能复用同一块配置 -
DocumentRoot路径必须是绝对路径，Windows 下用正斜杠或双反斜杠，单反斜杠会报错 - 如果启用
.htaccess，确保AllowOverride All已开，否则 source-map 的重写规则可能失效
如何让 Apache 返回 SourceMap-HTTP-Header
浏览器只认响应头里的 X-SourceMap 或标准的 SourceMap（注意大小写），而 Apache 默认不发这个头。靠前端构建工具（如 Webpack）加 header 不可靠——它只对开发服务器生效，XAMPP 是静态服务，header 必须由 Apache 注入。
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
在对应 <VirtualHost> 块内添加：
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 引入<script src="/js/app.js">，Apache 返回SourceMap: /js/app.js.map，那么浏览器就会请求http://localhost:8080/js/app.js.map—— 你得确保这个 URL 确实能返回 200 - 别把
.map文件放在node_modules或构建输出外目录；XAMPP 不会穿透htdocs外部路径 - 打开 Chrome DevTools → Network 标签页，筛选
js.map，看请求是否 404，以及 Request URL 是否符合预期
真正卡住的地方，往往不是“怎么加端口”，而是 header 写对了、路径却没对齐。多端口本身只是路由入口，source-map 加载成败取决于三者严丝合缝：header 值、浏览器请求路径、文件物理位置。
