部署Angular项目到非根目录的.htaccess重定向配置问题

现有规则失效的根因 #

核心原因是Apache在子目录处理.htaccess规则时，没有明确重写基准路径，相对路径的解析会跟随当前请求的层级动态错位：

• 访问单层路径如/folder/abcd时，重写规则解析的相对路径刚好能拼对/folder/index.html的位置，可以正常返回
• 访问多层路径如/folder/abcd/efgh时，Apache会基于当前请求的两层路径层级解析相对路径，把index.html错误拼接为/folder/abcd/index.html，该路径无对应文件就触发404
  如果.htaccess放置在Angular项目所属的/folder目录内部，仅靠硬编码/folder/index.html作为重写目标，还会存在规则匹配范围过大的问题：所有对站点根目录的请求都会被错误重定向到该子目录的index.html，影响站点其他内容的访问。

正确的配置规则 #

根据.htaccess的不同放置位置，对应规则略有差异，核心是通过RewriteBase固定重写基准路径，避免层级解析错位：

场景1：.htaccess放置在网站根目录（与/folder目录同级） #

RewriteEngine On
# 仅处理/folder路径下的请求
RewriteBase /folder/
# 真实存在的文件/目录直接放行，不触发重定向
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# 所有/folder下不存在的路径，统一重写指向/folder/index.html
RewriteRule ^ /folder/index.html [L]

场景2：.htaccess放置在/folder目录内部（Angular代码直接部署在该目录） #

RewriteEngine On
# 固定重写基准路径为当前Angular部署目录
RewriteBase /folder/
# 真实存在的静态资源（js/css/图片等）直接放行
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# 所有不存在的路径，统一指向当前目录下的index.html
RewriteRule ^ index.html [L]

配置完成后所有路径的重写都不会改变浏览器地址栏的原始URL，不管是单层路由、多层嵌套路由，只要不是指向真实存在的文件/目录，都会返回/folder/index.html的内容。

配套注意事项 #

• Angular项目构建时需要匹配部署路径，执行构建命令时加--base-href=/folder/参数，避免运行时静态资源从根目录加载触发404
• 测试时可以先清空浏览器缓存，分别访问单层路由、多层嵌套路由路径，确认返回的是index.html的内容、浏览器地址栏无跳转，同时真实存在的静态资源可以正常加载即可。

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