Apache前后端分离部署需双机制配合：前端路由通过mod_rewrite fallback至index.html（避免404），API请求则用mod_proxy代理至后端服务；二者不可混用，Proxy指令必须在主配置中设置，.htaccess仅支持重写。
Apache URL 重写实现前后端分离跳转，核心不是“把前端请求转给后端”，而是**让前端路由（如 /user/profile、/admin/dashboard）不触发 404，全部 fallback 到前端入口文件（如 index.html），由 Vue/React 自己接管路由**；同时，**明确区分 API 请求，将其代理到后端服务**。这需要 Rewrite 和 Proxy 两套机制配合，不能只靠 .htaccess 简单跳转。
确保前端路由能正确加载（HTML5 History 模式支持）
Vue Router 或 React Router 使用 history 模式时，访问 /about 会向服务器发起真实请求。若 Apache 没配置 fallback，就会返回 404。解决方法是在网站根目录（如 /var/www/html 或你的 dist 目录）下配置 .htaccess：
- 确认 Apache 已启用 mod_rewrite（
LoadModule rewrite_module modules/mod_rewrite.so）且对应目录的 AllowOverride All 已设置 - 在 .htaccess 中写入标准 fallback 规则：
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
这条规则的意思是：只要请求的不是真实存在的文件（!-f）或目录（!-d），就一律返回 /index.html，交由前端 JS 路由解析。注意 RewriteBase / 要与你的部署路径一致（比如部署在子路径 /app/，就要改成 RewriteBase /app/）。
把 API 请求精准代理到后端服务
前端发的 /api/login、/prod-api/order 这类请求，不能走 fallback，必须转发给真正的后端（如 Node.js、PHP 或 Java 服务）。这不能用 RewriteRule 实现，而要启用 mod_proxy 并在虚拟主机配置中设置：
Apache Superset 是一个广泛采用的开源 BI 平台，用于 SQL 探索、图表构建和仪表板交付。当代理需要查询仓库数据、组装仪表板或使用成熟的分析界面解释指标而不是临时笔记本代码时，此技能非常有用。
- 启用两个模块：
mod_proxy和mod_proxy_http（去掉 httpd.conf 中对应行前的 #） - 在
<VirtualHost *:80>或站点配置块内添加：
ProxyPass /api/ http://localhost:3000/
ProxyPassReverse /api/ http://localhost:3000/
ProxyPass /prod-api/ http://127.0.0.1:8008/
ProxyPassReverse /prod-api/ http://127.0.0.1:8008/
这样，所有以 /api/ 开头的请求都会被 Apache 当作代理请求，转发给本地 3000 端口的服务，响应再原样返回给浏览器。关键点：Proxy 指令必须写在主配置（httpd.conf 或 sites-enabled 文件）里，.htaccess 不支持 Proxy 指令。
避免常见冲突：静态资源与 API 路径不能重叠
如果前端构建产物里有 /api/ 目录（比如放了个 api.json），又同时配置了 ProxyPass /api/，Apache 会优先匹配真实文件，导致代理失效。所以要注意：
- 前端构建时，避免在 public/ 或 dist/ 下生成与 API 前缀同名的静态目录
- 如果必须保留，可在 Proxy 配置前加条件排除，或改用更精确的匹配（如
ProxyPass /api/v1/ http://...） - 确保前端代码中 API 请求地址统一使用相对路径（
/api/login）或带前缀的绝对路径（/prod-api/order），不要写成http://localhost:3000/api/...
验证与调试建议
配置完成后别急着重启，先检查几件事：
- 运行
apachectl configtest确认语法无误 - 查看 Apache 错误日志（通常是
/var/log/apache2/error.log），重点关注 mod_rewrite 的 rewrite_log（可临时开启）或 proxy 拒绝连接类报错 - 用 curl 测试：
curl -I http://yoursite.com/api/user应返回后端服务的响应头；curl http://yoursite.com/about应返回 index.html 内容，状态码 200
