编辑 .htaccess 后，Vuejs 应用程序仍然得到 404 页面答案

【问题标题】：Vuejs App still get 404 page after edit .htaccess编辑 .htaccess 后，Vuejs 应用程序仍然得到 404 页面
【发布时间】：2020-08-25 23:19:05
【问题描述】：

我在 digitalocean 的 apache2 服务器上部署了一个 Vuejs 应用程序，当您点击 url 时，它会将您转发到运行良好的登录页面，然后当我点击我得到的一张卡片时自动导航到有卡片的仪表板页面即使在我在 dist 中编辑我的 .htaccess 文件后也出现 404 页面

注意卡片路由是 domain.com/build

我尝试了文档中的 .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>

这是我的虚拟主机配置

<IfModule mod_ssl.c>
<VirtualHost *:443>

        ServerAdmin email
        ServerName domain.com
        ServerAlias www.domain.com
        DocumentRoot /var/www/domain.com/public_html/app/dist
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
        ProxyPass /api/  http://localhost:8000/
        ProxyPassReverse /api/ http://localhost:8000/
RewriteEngine on
# Some rewrite rules in this file were disabled on your HTTPS site,
# because they have the potential to create redirection loops.

#RewriteCond %{SERVER_NAME} =domain.com
#RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
SSLCertificateFile /etc/letsencrypt/live/domain.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/domain.com/privkey.pem
Include /etc/letsencrypt/options-ssl-apache.conf
</VirtualHost>
</IfModule>

【问题讨论】：

“当我点击其中一张卡片时，我得到 404 页面” ????这听起来根本不对。即使没有 URL 重写，通过单击进行导航也应该可以正常工作。 card 代码是什么样的？当您单击时它试图做什么以及产生 404 的 URL 是什么？
我的意思是当我点击卡片时，它会引导我路由“domain.com/build”，它会将我导航到 404 页面，我认为它与 apache 虚拟主机 proxy_pass 冲突。它会将我导航到包含此卡详细信息的页面。

标签： apache .htaccess vue.js digital-ocean

【解决方案1】：

虚拟主机文件没有问题，问题出在/etc/apache2中的apache2.conf文件中。我需要的是从

改变这部分

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>

到：

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

您需要更改 AllowOverride 属性。

【讨论】：