在Apache服务器部署Vue.js路由时遭遇404错误求助

你的核心问题是：当前配置只在80端口（HTTP）里加了Vue路由重写规则，但又把所有HTTP请求强制跳转到HTTPS，而HTTPS对应的443端口没有配置任何路由重写规则，导致刷新页面时，Apache找不到对应路由的物理文件，返回404。

修复步骤： #

1. 启用必要的Apache模块
   确保rewrite和ssl模块已经启用，执行以下命令：

   sudo a2enmod rewrite ssl
   sudo systemctl restart apache2
   

2. 拆分并修改VirtualHost配置
   把原配置文件拆分为HTTP（80端口）和HTTPS（443端口）两部分，将Vue的路由重写规则放到HTTPS的配置里：

   80端口配置（仅负责HTTP转HTTPS跳转）

   <VirtualHost *:80>
       ServerName pannel.takfibra.com
       ServerAdmin info@fabioangelici.com
   
       # 强制跳转至HTTPS
       RewriteEngine On
       RewriteCond %{SERVER_NAME} =pannel.takfibra.com
       RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
   
       ErrorLog ${APACHE_LOG_DIR}/error.log
       CustomLog ${APACHE_LOG_DIR}/access.log combined
   </VirtualHost>
   

   443端口配置（处理HTTPS请求及Vue路由）

   注意替换SSL证书路径为你实际的证书文件路径（比如使用Let's Encrypt的话，路径通常是/etc/letsencrypt/live/pannel.takfibra.com/）：

   <VirtualHost *:443>
       ServerName pannel.takfibra.com
       ServerAdmin info@fabioangelici.com
       DocumentRoot /var/www/takfibraec/vuejs-admin/dist
   
       <Directory /var/www/takfibraec/vuejs-admin/dist>
           Options -Indexes +FollowSymLinks
           AllowOverride All
           Require all granted
   
           # Vue单页应用路由重写规则
           RewriteEngine On
           RewriteBase /
           RewriteRule ^index\.html$ - [L]
           RewriteCond %{REQUEST_FILENAME} !-f
           RewriteCond %{REQUEST_FILENAME} !-d
           RewriteRule . /index.html [L]
       </Directory>
   
       # SSL证书配置
       SSLCertificateFile /path/to/your/fullchain.pem
       SSLCertificateKeyFile /path/to/your/privkey.pem
   
       ErrorLog ${APACHE_LOG_DIR}/error.log
       CustomLog ${APACHE_LOG_DIR}/access.log combined
   </VirtualHost>
   

3. 检查目录权限与文件存在性

   • 确认/var/www/takfibraec/vuejs-admin/dist目录下存在index.html文件
   • 确保Apache对该目录有读取权限：

     sudo chown -R www-data:www-data /var/www/takfibraec/vuejs-admin/dist
     

4. 重启Apache生效配置

   sudo systemctl restart apache2
   

内容的提问来源于stack exchange，提问作者Imperfectcircle