vue.js - 如何使用 .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指令，所以我删除了它。