使用 Apache 部署 Vue：路由在历史模式下不起作用

Question

我在使用 Apache（也是 HTTPs）部署 vue 应用程序（没有数据库也没有服务器端代码）时遇到问题。这是我的 .conf 文件：

<VirtualHost *:80>
ServerAdmin myemail@gmail.com
ServerName mydomain.me
ServerAlias www.mydomain.me
DocumentRoot /var/www/mydomain.me/dist
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined

<Directory /var/www/mydomain.me/dist>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

RewriteEngine on
RewriteCond %{SERVER_NAME} =mydomain.me [OR]
RewriteCond %{SERVER_NAME} =www.mydomain.me
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

当我访问 mydomain 时，首页已正确加载（使用 构建的 index.html npm run build），但是没有任何路由工作（即 /portfolio）。

但是，如果我将路由器模式从 切换history到hash，则一切正常 ( /#/portfolio)，但我想保持history模式处于活动状态。

提前致谢！

Answer 1

最终得到了一个解决方案 - 不确定它是否是最好的，但它适用于我的情况。

/etc/apache2/sites-enabled/mydomain.me-le-ssl.conf

<IfModule mod_ssl.c>
<VirtualHost *:443>
    ServerName mydomain.me
    ServerAlias www.mydomain.me
    DocumentRoot /var/www/mydomain.me/dist
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    <Directory /var/www/mydomain.me/dist>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    RewriteEngine on
    RewriteCond %{SERVER_NAME} =mydomain.me [OR]
    RewriteCond %{SERVER_NAME} =www.mydomain.me
    RewriteCond %{HTTPS} !=on
    RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]

    Include /etc/letsencrypt/options-ssl-apache.conf
    SSLCertificateFile /etc/letsencrypt/live/mydomain.me/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/mydomain.me/privkey.pem
    Include /etc/letsencrypt/options-ssl-apache.conf
</VirtualHost>
</IfModule>

/var/www/mydomain.me/dist 上的 .htaccess

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule (.*) index.html [QSA,L]
</IfModule>

Answer 2

您的情况很棘手，因为那些RewriteConds 和RewriteRule您似乎正在重定向到 HTTPS。

如果是这样，这里有一些可能有用的东西：

/etc/apache2/sites-enabled/mydomain.me-le-ssl.conf

<IfModule mod_ssl.c>
<VirtualHost *:443>
    ServerName mydomain.me
    ServerAlias www.mydomain.me
    DocumentRoot /var/www/mydomain.me/dist
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    <Directory /var/www/mydomain.me/dist>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    RewriteEngine on
    RewriteCond %{SERVER_NAME} =mydomain.me [OR]
    RewriteCond %{SERVER_NAME} =www.mydomain.me
    RewriteCond %{HTTPS} !=on
    RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]

    Include /etc/letsencrypt/options-ssl-apache.conf
    SSLCertificateFile /etc/letsencrypt/live/mydomain.me/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/mydomain.me/privkey.pem
    Include /etc/letsencrypt/options-ssl-apache.conf
</VirtualHost>
</IfModule>

/var/www/mydomain.me/dist 上的 .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>