在Apache中结合Vue History模式通过.htaccess强制HTTPS的方法

Got it! 要给你的Vue history模式配置加上强制HTTPS的规则其实很简单，只需要在现有Rewrite规则的最前面插入一段HTTPS跳转逻辑就行——因为Rewrite规则是按顺序执行的，得先把HTTP请求转成HTTPS，再处理Vue的路由重写。

下面是修改后的完整.htaccess配置：

<IfModule mod_rewrite.c>
  # 强制跳转HTTPS
  RewriteEngine On
  # 如果是普通服务器，用这个判断
  RewriteCond %{HTTPS} off
  # 如果是反向代理/CDN环境，替换上面的条件为下面这行
  # RewriteCond %{HTTP:X-Forwarded-Proto} !https
  RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

  # Vue.js History模式的路由重写规则
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

关键部分说明： #

• 强制HTTPS规则：

  • RewriteCond %{HTTPS} off：检查当前请求是否是HTTP（非HTTPS）
  • 如果你用了CDN或者反向代理，服务器直接接收到的是HTTP请求，这时候要换成RewriteCond %{HTTP:X-Forwarded-Proto} !https，通过代理传递的头信息判断原始请求是否是HTTPS
  • RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]：把所有HTTP请求永久重定向（R=301）到对应的HTTPS地址，[L]表示这是最后一条规则，处理完就停止后续匹配

• Vue路由规则：
  这部分就是你原来的配置，作用是把所有非文件、非目录的请求都转发到index.html，确保Vue的前端路由能正常工作，刷新页面不会出现404错误。

记得修改后要重启Apache或者让配置生效，另外测试的时候可以先用R=302临时重定向验证，没问题再改成R=301永久重定向，对SEO更友好哦。

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