当前位置：首页 > 文章列表 > 文章 > php教程 > XAMPP部署Angular应用，配置URL重写方法

XAMPP部署Angular应用，配置URL重写方法

2026-05-12 12:36:33 0浏览收藏

本文深入解析了在XAMPP环境下部署Angular应用时子路由访问返回404的根本原因——并非代码缺陷，而是Apache未正确启用并执行URL重写机制；文章直击三大关键环节：确保mod_rewrite模块被准确加载、在对应项目目录的Apache配置中启用AllowOverride All并授予必要权限、以及根据实际部署路径精确设置RewriteBase与.htaccess重写规则，并提供了实用排查技巧（如故意引入语法错误验证.htaccess生效、检查文件扩展名等），帮助开发者快速定位和彻底解决Angular单页应用在XAMPP中的路由跳转失效问题。

XAMPP环境部署Angular应用 XAMPP配置URL重写规则

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/ 下，而默认的配置段只覆盖根目录。如果你把应用放进了子文件夹，却只改了根目录的 AllowOverride None，.htaccess 在子目录下依然被忽略。

正确做法是：在 httpd.conf 中找到或新增对应目录块，例如：


    AllowOverride All
    Require all granted

其中 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 —— 用记事本保存时选择“所有文件”类型，并手动输入文件名带点。

本篇关于《XAMPP部署Angular应用，配置URL重写方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

XAMPP