单页应用的前端路由依赖客户端JS处理路径切换，当直接访问或刷新非根路径的深层链接时，Apache服务器默认会寻找对应路径的物理文件，找不到就会返回404错误，使用.htaccess的URL重写功能可以将所有请求指向单页应用的入口文件，由前端路由接管处理。
.htaccess实现前端路由的核心原理
核心思路是通过mod_rewrite模块的规则，判断请求的资源是否为真实存在的文件或目录，如果不是则将请求重写到单页应用的入口文件（通常是index.html），让前端路由根据请求的URL路径渲染对应的页面内容。
基础配置步骤
1. 开启Rewrite引擎
首先需要在.htaccess文件开头开启URL重写功能，否则后续规则不会生效。
# 开启Rewrite引擎 RewriteEngine On
2. 排除真实存在的文件与目录
需要先判断请求的路径是否对应服务器上真实存在的文件或目录，如果是则直接返回对应资源，避免影响静态资源的正常加载。
# 如果请求的是真实存在的文件，直接返回
RewriteCond %{REQUEST_FILENAME} !-f
# 如果请求的是真实存在的目录，直接返回
RewriteCond %{REQUEST_FILENAME} !-d
3. 重写所有其他请求到入口文件
当请求既不是文件也不是目录时，将请求重写到index.html，由前端路由处理。
# 将所有符合条件的请求重写到index.html RewriteRule ^(.*)$ index.html [L]
完整配置示例
将上述规则组合后，完整的.htaccess配置如下，可直接放到单页应用的根目录下使用。
# 开启Rewrite引擎
RewriteEngine On
# 排除真实存在的文件和目录
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 重写请求到入口文件
RewriteRule ^(.*)$ index.html [L]
特殊场景配置说明
入口文件不在根目录的情况
如果单页应用的入口文件放在子目录（比如app目录）下，需要调整重写规则的目标路径：
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 重写到子目录下的index.html
RewriteRule ^(.*)$ /app/index.html [L]
需要保留查询参数的情况
默认的重写规则会保留原始请求的查询参数，如果需要明确处理，可以添加QSA标志：
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# QSA表示将原始查询参数附加到重写后的URL
RewriteRule ^(.*)$ index.html [L,QSA]
常见问题与注意事项
- 确保Apache服务器已经开启
mod_rewrite模块，否则.htaccess的重写规则不会生效，可以通过在配置中添加错误语法测试是否有规则生效的提示。 - .htaccess文件需要放在单页应用的根目录，且文件名是.htaccess，注意不要添加额外的后缀。
- 如果服务器配置了其他URL重写规则，需要注意规则的优先级，避免冲突，[L]标志表示当前规则是最后一条匹配的规则，匹配后不再执行后续规则。
- 配置完成后可以通过访问一个不存在的路径测试，比如访问/some/route，如果返回的是单页应用的内容而不是404，说明配置生效。
注意：如果使用其他Web服务器比如Nginx，配置方式与.htaccess不同，需要根据对应服务器的URL重写语法进行调整。