XAMPP配置多端口实现Angular项目部署-php教程-PHP中文网

angular项目部署到apache出现刷新404、路由失效等问题，根本原因是未配置html5 history模式的服务器回退机制：必须在httpd.conf中显式添加listen端口，在httpd-vhosts.conf中配置virtualhost并启用allowoverride all，再于directory内添加rewriterule将非静态资源请求重写至index.html。

xampp配置多端口实现angular项目部署

Angular项目直接丢进 htdocs 跑不起来，刷新 404、路由失效、静态资源 404 —— 不是 Angular 本身的问题，而是 Apache 默认没配好前端路由回退（fallback）和多端口隔离。必须改 httpd.conf 和 httpd-vhosts.conf，且顺序、权限、监听配置三者缺一不可。

Listen 指令必须显式添加多个端口

Apache 默认只监听 80，Angular 项目若想和本地其他服务（比如后端 API、另一个前端 demo）共存，就得开新端口，比如 8080、8081。但只改 httpd-vhosts.conf 不生效 —— 因为 Apache 根本不“听”这些端口。

打开 C:\XAMPP\apache\conf\httpd.conf，找到 Listen 80 这一行，在它下面**新增两行**：

Listen 8080
Listen 8081

注意：Listen 必须是全局指令，不能包在 <virtualhost></virtualhost> 里；也不能写成 Listen: 8080（冒号是错的）；更不能只加 VirtualHost 却漏掉 Listen，否则启动 Apache 时会报 “address already in use” 或静默失败。

VirtualHost 配置要匹配端口并启用 DocumentRoot 权限

端口开了，还得告诉 Apache：这个端口该把请求交给哪个文件夹。编辑 C:\XAMPP\apache\conf\extra\httpd-vhosts.conf，在末尾追加：

<virtualhost>
    ServerName localhost
    DocumentRoot "C:/xampp/htdocs/my-angular-app"
    <directory>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </directory></virtualhost>

关键点：

XAMPP 8.0.30

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

下载

ServerName 写 localhost 就够用，不用配 hosts；如果想用 myapp.local，才需要改 C:\Windows\System32\drivers\etc\hosts
DocumentRoot 必须指向你 ng build 后的 dist/ 目录（例如 dist/my-angular-app），不是项目根目录
AllowOverride All 是为了让后续的重写规则（如 Angular 路由 fallback）生效；Require all granted 替代旧版的 Order Deny,Allow，否则 403 Forbidden

Angular 路由刷新 404？必须加 RewriteRule 回退

Angular 的 RouterModule 使用 HTML5 History 模式（默认），访问 /dashboard 时浏览器发的是真实 HTTP 请求，但服务器找不到这个路径，直接返回 404。解决方案是让 Apache 把所有非静态资源请求都转给 index.html。

在刚才那个 <directory></directory> 块内部，**紧贴 Require all granted 下方**插入：

    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]

注意：RewriteEngine On 必须开启；RewriteBase / 要和你的部署路径一致（如果你把 dist 放在 htdocs/myapp/ 下，这里就得写 RewriteBase /myapp/）；!-f 和 !-d 是判断“不是文件也不是目录”，避免把 assets/logo.png 也重写过去。

重启 Apache 前务必检查三个地方

改完配置不重启=白改；重启失败大概率是这三处之一出问题：

httpd.conf 中 Include conf/extra/httpd-vhosts.conf 这行前面的 # 是否已删掉？没放开这行，httpd-vhosts.conf 根本不加载
端口是否被占用？运行 netstat -ano | findstr :8080 看 PID，再用任务管理器查进程。IIS、Skype、甚至某些国产软件常抢 80 和 8080
路径里的反斜杠 \ 是否全换成了正斜杠 /？Windows 下 Apache 对路径分隔符敏感，C:\xampp\htdocs 会解析失败，必须写 C:/xampp/htdocs

最易忽略的一点：Angular 构建时若用了 --base-href（比如 ng build --base-href /myapp/），那 RewriteBase 和 DocumentRoot 的层级必须严格对齐，否则 JS/CSS 路径 404 —— 这个细节比端口配置还容易翻车。