Apache 2.4.27下HTTPS重定向与Vue2 SPA无#路由配置问题

我最近在Apache 2.4.27环境部署应用时刚好碰到这两个问题，整理了亲测有效的配置方案，分享给大家：

1. HTTP请求强制重定向到HTTPS #

这个配置已经验证可行，适配带反向代理的场景（比如前置Nginx或云服务商负载均衡），完整规则如下：

RewriteEngine on
RewriteCond %{HTTP_HOST} ^site\.com [NC]
RewriteCond %{HTTP:X-Forwarded-Proto} ^http$
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

规则说明： #

• RewriteEngine on：开启URL重写模块
• RewriteCond %{HTTP_HOST} ^site\.com [NC]：匹配指定域名（NC表示不区分大小写），多域名场景可按需调整
• RewriteCond %{HTTP:X-Forwarded-Proto} ^http$：检查反向代理传递的协议是否为HTTP，无反向代理可移除这条
• RewriteCond %{HTTPS} off：直接校验当前请求是否为HTTP
• RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]：将所有请求永久重定向（R=301）到HTTPS，L表示执行完此规则后停止后续匹配

2. Vue2单页应用（SPA）实现无#号客户端路由 #

Vue官方推荐的mod_rewrite方案需要补全完整规则——因为SPA路由逻辑在客户端处理，用户直接访问/about这类路径时，Apache会因找不到对应文件返回404，需将这类请求转发到index.html。完整配置如下：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

规则说明： #

• <IfModule mod_rewrite.c>：仅当mod_rewrite模块启用时执行这段配置
• RewriteRule ^index\.html$ - [L]：请求index.html本身时直接放行，不做处理
• RewriteCond %{REQUEST_FILENAME} !-f：判断请求的不是真实存在的文件
• RewriteCond %{REQUEST_FILENAME} !-d：同时判断请求的不是真实存在的目录
• RewriteRule . /index.html [L]：将符合条件的请求转发到index.html，交由Vue客户端路由处理

注意：确保Apache已启用mod_rewrite模块，Linux环境可通过a2enmod rewrite命令开启，之后重启Apache服务生效。

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