如何使用 .htaccess 重定向到 https index.html

Question

我有一个 vue-laravel 水疗中心。为了让 vue 应用程序在历史模式下正常工作，我需要确保它重定向到 index.html。我遵循 vue cli 文档的说明并在 .htaccess 文件中使用这段代码

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

同时我还需要确保所有 http 请求都重定向到 https，我的 hostgator 托管为此提供了这段代码。

RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]
RewriteCond %{HTTP_HOST} ^subdomain\.domain\.com$
RewriteRule ^/?$ "https\:\/\/subdomain\.domain\.com\/" [R=301,L]

问题是这两段代码似乎不能一起工作。但是，当另一个被注释掉时，它们中的每一个都可以工作。

Answer 1

顺序很重要。规范（HTTP 到 HTTPS）重定向需要在之前重写为 index.html.

RewriteCond %{HTTP_HOST} ^subdomain\.domain\.com$
RewriteRule ^/?$ "https\:\/\/subdomain\.domain\.com\/" [R=301,L]

但是，这条规则会重定向到自身并导致重定向循环！（这不是 HTTP 到 HTTPS 重定向的一部分。）

您不需要 <IfModule> 包装器，也不需要重复 RewriteEngine 指令。

换句话说：

RewriteEngine On

# Redirect HTTP to HTTPS
RewriteCond %{SERVER_PORT} !^443$
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]

# Front-Controller
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

您实际上并没有使用 RewriteBase 指令，所以我删除了它。

如何使用 .htaccess 重定向到 https index.html

How to redirect to https index.html with .htacess

.htaccess

single-page-application

vue.js

vue-cli