讲师中心 微信公众号
AI工具推荐 视频效率加速

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

雨浩酱_8874

雨浩酱_8874

发布时间:2026-05-09 16:14:47

|

446人浏览过

|

来源于php中文网

原创

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

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

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

XAMPP 8.0.30
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

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

热门AI工具

更多
Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

相关专题

更多
php文件怎么打开
php文件怎么打开

打开php文件步骤:1、选择文本编辑器;2、在选择的文本编辑器中,创建一个新的文件,并将其保存为.php文件;3、在创建的PHP文件中,编写PHP代码;4、要在本地计算机上运行PHP文件,需要设置一个服务器环境;5、安装服务器环境后,需要将PHP文件放入服务器目录中;6、一旦将PHP文件放入服务器目录中,就可以通过浏览器来运行它。

10564

2023.09.01

php怎么取出数组的前几个元素
php怎么取出数组的前几个元素

取出php数组的前几个元素的方法有使用array_slice()函数、使用array_splice()函数、使用循环遍历、使用array_slice()函数和array_values()函数等。本专题为大家提供php数组相关的文章、下载、课程内容,供大家免费下载体验。

6201

2023.10.11

php反序列化失败怎么办
php反序列化失败怎么办

php反序列化失败的解决办法检查序列化数据。检查类定义、检查错误日志、更新PHP版本和应用安全措施等。本专题为大家提供php反序列化相关的文章、下载、课程内容,供大家免费下载体验。

2115

2023.10.11

php怎么连接mssql数据库
php怎么连接mssql数据库

连接方法:1、通过mssql_系列函数;2、通过sqlsrv_系列函数;3、通过odbc方式连接;4、通过PDO方式;5、通过COM方式连接。想了解php怎么连接mssql数据库的详细内容,可以访问下面的文章。

3908

2023.10.23

php连接mssql数据库的方法
php连接mssql数据库的方法

php连接mssql数据库的方法有使用PHP的MSSQL扩展、使用PDO等。想了解更多php连接mssql数据库相关内容,可以阅读本专题下面的文章。

4614

2023.10.23

html怎么上传
html怎么上传

html通过使用HTML表单、JavaScript和PHP上传。更多关于html的问题详细请看本专题下面的文章。php中文网欢迎大家前来学习。

3631

2023.11.03

PHP出现乱码怎么解决
PHP出现乱码怎么解决

PHP出现乱码可以通过修改PHP文件头部的字符编码设置、检查PHP文件的编码格式、检查数据库连接设置和检查HTML页面的字符编码设置来解决。更多关于php乱码的问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5177

2023.11.09

php文件怎么在手机上打开
php文件怎么在手机上打开

php文件在手机上打开需要在手机上搭建一个能够运行php的服务器环境,并将php文件上传到服务器上。再在手机上的浏览器中输入服务器的IP地址或域名,加上php文件的路径,即可打开php文件并查看其内容。更多关于php相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

4042

2023.11.13

PixTV官网入口地址合集
PixTV官网入口地址合集

本专题汇总了 PixTV AI 一站式视频创作平台的官方入口与使用教程。无需下载软件,浏览器直接访问即可使用。平台将剧本、图像、视频、声音与剪辑整合在“无限画布”中,接入 GPT Image 2.5、Seedance 2.5 等头部模型。本专题整理了从新建画布、角色锚定、分镜拆分到视频生成与导出的完整操作指南,助你快速上手 AI 短剧与漫剧创作。

80

2026.10.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn