XAMPP 中 Angular 子路由 404 的根本原因是 Apache 未将请求重写至 index.html,需三步修复:启用 mod_rewrite 模块(确认 LoadModule 行未注释且路径正确)、在对应项目目录的 <Directory> 块中设置 AllowOverride All 和 Require all granted、配置正确的 RewriteBase 与 .htaccess 规则。

Angular 应用在 XAMPP 中直接访问子路由(如 /dashboard)会 404,不是代码问题,是 Apache 没把请求正确转给 index.html —— 必须配 URL 重写,且关键点不在 .htaccess 写法,而在 Apache 主配置是否允许它生效。
确认 mod_rewrite 已启用且无拼写错误
很多人改了 httpd.conf 却仍失败,是因为这一行被注释或路径写错:
LoadModule rewrite_module modules/mod_rewrite.so
注意:modules/ 是相对路径,指向 XAMPP\apache\modules\;如果 XAMPP 安装在 D:\xampp,那完整路径就是 D:\xampp\apache\modules\mod_rewrite.so。Windows 下大小写不敏感,但空格、斜杠方向、多余符号(比如中文全角符号)会导致加载失败。Apache 启动时若模块加载出错,error.log 里会出现类似 Cannot load modules/mod_rewrite.so 的报错,务必检查。
AllowOverride All 必须作用于 Angular 项目所在目录
Angular 构建后通常放在 htdocs/my-app/ 下,而默认的 <Directory "C:/xampp/htdocs"> 配置段只覆盖根目录。如果你把应用放进了子文件夹,却只改了根目录的 AllowOverride None,.htaccess 在子目录下依然被忽略。
正确做法是:在 httpd.conf 中找到或新增对应目录块,例如:
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
<Directory "C:/xampp/htdocs/my-app">
AllowOverride All
Require all granted
</Directory>
其中 Require all granted 是 Apache 2.4+ 必需的权限指令,缺了会导致 403 错误。
Angular 路由所需的 .htaccess 规则要匹配部署路径
规则本身很简单,但 RewriteBase 值必须和实际 URL 路径一致。比如你通过 http://localhost/my-app/dashboard 访问,那么 RewriteBase 就得是 /my-app/,而不是 / 或 /my-app(末尾斜杠不能省)。
.htaccess 内容示例(放在 my-app/ 目录下):
RewriteEngine On
RewriteBase /my-app/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /my-app/index.html [L]
-
!-f和!-d确保真实存在的文件(如assets/logo.png)不被重写 -
[L]表示“最后一条规则”,避免后续规则干扰 - 如果去掉
RewriteBase,又没在RewriteRule中补全路径,index.html会 404 —— 因为 Apache 默认按当前目录解析路径
重启 Apache 后仍 404?先验证 .htaccess 是否被读取
最快速的验证方式:在 .htaccess 里故意写一行非法语法,比如 RewriteEngine Onnnn,然后刷新页面。如果返回 500 错误,说明 .htaccess 已生效;如果还是 404,说明 Apache 根本没加载它 —— 此时回到前两步,重点检查 AllowOverride 位置和 Directory 路径是否精确匹配你的项目物理路径。
另外,Windows 资源管理器默认隐藏文件扩展名,确保你创建的是真正的 .htaccess 文件,而不是 .htaccess.txt —— 用记事本保存时选择“所有文件”类型,并手动输入文件名带点。

















