在XAMPP环境中为Apache配置多端口并配合AddType指令，能够让我们在同一台本地设备上通过不同端口运行多个独立项目，同时保证不同扩展名的文件被正确解析。这种配置方式适合需要同时开发多个不同类型项目的场景，比如同时运行PHP项目和静态HTML项目。
Apache多端口配置基础步骤
首先我们需要完成Apache的多端口监听配置，这是后续添加AddType指令的前提。XAMPP的Apache主配置文件位于安装目录下的apacheconfhttpd.conf路径中。
1. 开启端口监听
打开httpd.conf文件，找到Listen配置项，默认已经有Listen 80的配置，我们新增需要监听的端口，比如8080和8081：
# 原有默认监听端口 Listen 80 # 新增多端口监听 Listen 8080 Listen 8081
2. 配置虚拟主机
接着需要为新增的端口配置虚拟主机，打开apacheconfextrahttpd-vhosts.conf文件，添加对应端口的虚拟主机配置：
# 端口8080的虚拟主机配置
<VirtualHost *:8080>
# 指定项目根目录
DocumentRoot "D:/xampp/htdocs/project1"
# 指定域名，本地可填localhost
ServerName localhost
# 目录权限配置
<Directory "D:/xampp/htdocs/project1">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
# 端口8081的虚拟主机配置
<VirtualHost *:8081>
DocumentRoot "D:/xampp/htdocs/project2"
ServerName localhost
<Directory "D:/xampp/htdocs/project2">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
配置完成后重启Apache服务，此时访问localhost:8080和localhost:8081就能分别打开两个不同项目的页面。
AddType指令的作用与基础用法
AddType指令是Apache中用于关联文件扩展名和MIME类型的配置指令，基本语法为AddType MIME类型 扩展名1 扩展名2 ...。当浏览器请求对应扩展名的文件时，Apache会根据AddType的配置返回正确的MIME类型，避免浏览器将文件当作未知类型处理。
比如默认情况下Apache可能没有配置.webp图片的MIME类型，浏览器请求.webp文件时可能会触发下载而不是正常显示，此时添加如下配置即可解决：
AddType image/webp .webp
多端口场景下AddType的配置方式
在多端口配置的场景中，AddType可以放在两个位置，作用范围不同，开发者需要根据实际需求选择。
1. 全局配置AddType
如果希望所有端口的项目都生效某个AddType规则，可以直接将配置写在httpd.conf文件中，或者写在httpd-vhosts.conf文件的开头（不在任何虚拟主机标签内）。比如我们希望所有端口都支持.apk文件的下载解析：
# 全局生效的AddType配置，所有端口都会应用 AddType application/vnd.android.package-archive .apk
2. 单个端口虚拟主机内配置AddType
如果只需要某个端口的项目生效特定的AddType规则，可以将配置写在对应端口的<VirtualHost>标签内部。比如端口8080的项目需要支持.mjs的JavaScript模块文件解析，而8081端口不需要，就可以这样配置：
<VirtualHost *:8080>
DocumentRoot "D:/xampp/htdocs/project1"
ServerName localhost
<Directory "D:/xampp/htdocs/project1">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
# 仅当前8080端口生效的AddType配置
AddType application/javascript .mjs
</VirtualHost>
常见问题与验证方法
配置完成后如果出现文件解析异常，可以通过以下方式排查：
- 检查AddType的MIME类型是否填写正确，错误的MIME类型会导致浏览器解析异常
- 确认AddType配置的位置是否符合预期，全局配置和虚拟主机内配置的作用范围不同
- 重启Apache服务后再测试，配置修改后未重启不会生效
我们可以通过浏览器的开发者工具查看网络请求的响应头，确认Content-Type字段是否和AddType配置的一致。比如访问localhost:8080/test.mjs，响应头的Content-Type应该显示为application/javascript，说明配置生效。
完整配置示例
以下是一个同时包含多端口配置和对应AddType指令的完整httpd-vhosts.conf示例：
# 全局AddType配置，所有端口生效
AddType image/webp .webp
# 端口8080虚拟主机，支持.mjs文件
<VirtualHost *:8080>
DocumentRoot "D:/xampp/htdocs/project1"
ServerName localhost
<Directory "D:/xampp/htdocs/project1">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
AddType application/javascript .mjs
</VirtualHost>
# 端口8081虚拟主机，支持.wasm文件
<VirtualHost *:8081>
DocumentRoot "D:/xampp/htdocs/project2"
ServerName localhost
<Directory "D:/xampp/htdocs/project2">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
AddType application/wasm .wasm
</VirtualHost>