Apache部署SPA需让所有非静态资源请求fallback至index.html：启用mod_rewrite，通过.htaccess或主配置添加重写规则，确保RewriteCond排除真实文件、目录及符号链接，RewriteRule将其他请求指向/index.html，并验证静态资源不被误捕获。
Apache URL 重写实现前端项目打包跳转，核心目标是：让所有非静态资源请求都 fallback 到 index.html（即 SPA 的入口文件），避免刷新页面时出现 404。这是单页应用（如 Vue、React、Angular 打包后）在 Apache 上部署必须解决的问题。
✅ 正确配置的关键逻辑
前端打包后通常生成静态文件（index.html、js/xxx.js、css/xxx.css 等），部署到 Apache 后，服务器默认按真实路径找文件。但 SPA 路由（如 /user/profile）并不存在对应物理文件，需由前端 JS 拦截并渲染——这就要求：
只要请求的不是真实存在的文件或目录，就一律返回 index.html，由前端路由接管。
? .htaccess 配置（推荐，适用于根目录或子目录）
确保已启用 mod_rewrite，并在网站根目录（或子目录）下放置 .htaccess 文件：
<IfModule mod_rewrite.c>
RewriteEngine On
# 如果请求的是真实存在的文件（如 .js/.css/.png），直接返回，不重写
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d [OR]
RewriteCond %{REQUEST_FILENAME} -l
RewriteRule ^ - [L]
# 其他所有请求 → 返回 index.html
RewriteRule ^(.*)$ /index.html [L]
</IfModule>⚠️ 注意：
立即学习“前端免费学习笔记（深入）”；
RewriteCond %{REQUEST_FILENAME} -l是可选的，用于排除符号链接；若不用可删。- 若项目部署在子目录（如
https://example.com/myapp/），需加RewriteBase /myapp/（放在RewriteEngine On下一行）。
? 常见变体与增强场景
▪ 避免 API 请求被劫持（前后端同域部署）
如果后端接口也在同一域名下（如 /api/login），需排除以 /api 开头的请求：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
RewriteCond %{REQUEST_URI} !^/api/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L]▪ 支持带查询参数的路由（如 /user?id=123）
默认规则已兼容，无需额外处理。[L] 保证匹配后立即终止，index.html 加载后，前端路由库（如 Vue Router 的 history 模式）会自动解析完整 URL。
▪ 静态资源路径错误？检查 publicPath
确保前端构建配置中 publicPath 设置正确：
- 若部署在根目录 →
publicPath: "/" - 若部署在子目录（如
/admin/）→publicPath: "/admin/"，且RewriteBase必须同步设置。
? 服务端全局配置（httpd.conf 或虚拟主机）
如无法使用 .htaccess（例如共享主机禁用），可在 <Directory> 或 <VirtualHost> 中配置：
<Directory "/var/www/html"> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory>
再配合上述 .htaccess 即可生效。若必须硬编码到 httpd.conf，规则写法一致，只是位置不同。
❌ 容易踩的坑
-
没开启
mod_rewrite：确认LoadModule rewrite_module modules/mod_rewrite.so已取消注释，并重启 Apache。 -
AllowOverride None：导致.htaccess不生效，必须改为All。 -
误加开头斜杠：
.htaccess中RewriteRule ^/xxx写法错误（应为^xxx），Apache 会忽略。 -
缓存干扰：浏览器可能缓存了旧的 404 响应，调试时用无痕模式或清缓存，重定向测试用
[R=302]临时替代[L]观察跳转行为。
不复杂但容易忽略细节，配对 RewriteCond 和 RewriteRule 的逻辑链，就能稳稳支撑前端路由。
