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

Question

我在使用 Apache（也包括 HTTP）部署 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 时，首页已正确加载（使用 npm run build 构建的 index.html），但是 none 的路由有效（即 /portfolio）。

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

提前致谢！

Answer 1

你的情况很棘手，因为你的那些 RewriteCond 和 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>

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

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

Answer 2

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

/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>

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

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

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

Vue deploy with Apache: routes don't work in history mode

apache

vue.js

vue-router