Angular7.1.4部署Apache2.4.10时PathLocationStrategy路由失效问题

你的问题核心在于路由前缀/app/没有被正确保留，Apache的重写规则直接把请求导向了根目录的index.html，导致Angular无法识别原本的路由路径。下面是针对性的解决方案：

1. 修正Angular的Base Href #

因为所有业务URL都以/app/开头，需要把index.html里的base href从根路径调整为/app/：

<base href="/app/">

如果是生产环境构建，更推荐直接在构建命令中指定base href，避免手动修改文件：

ng build --prod --base-href /app/

2. 更新.htaccess重写规则 #

当前的规则会把所有非文件/目录的请求直接重写到根目录的index.html，丢失了/app/前缀。你需要调整规则，只处理/app/开头的请求，并将其重写到/app/index.html，同时保留查询参数：

Options +FollowSymlinks
RewriteEngine On

# 仅匹配/app/开头的请求，不干扰服务器其他资源
RewriteCond %{REQUEST_URI} ^/app/
# 检查请求的文件或目录是否不存在
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 重写到/app/index.html，QSA参数保留原查询串（比如?id=favorites）
RewriteRule ^app/(.*)$ /app/index.html [L,QSA]

关键规则说明： #

• RewriteCond %{REQUEST_URI} ^/app/：确保规则只作用于你的应用路径，不会影响服务器上的其他站点或静态资源。
• [L,QSA]：L表示这是最后一条匹配规则，停止后续处理；QSA（Query String Append）会把原请求的查询参数完整附加到重写后的URL中，保证Angular能正常读取参数。

3. 验证Apache基础配置 #

确保Apache已经启用了mod_rewrite模块，并且站点配置中允许.htaccess文件生效（需要设置AllowOverride All）。

测试验证 #

部署修改后的代码和.htaccess文件后，访问http://intranet.company.com/app/myspace?id=favorites，此时Apache会将请求转发到/app/index.html，同时保留/app/myspace的路由路径和查询参数，Angular的PathLocationStrategy就能正确解析路由，加载对应的页面了。

内容的提问来源于stack exchange，提问作者TheForbidden