Vue项目Apache部署问题：History模式下路由失效

看起来你已经搭好了基础的80端口配置，但还缺了关键的HTTPS配置和Vue单页应用必需的路由重写规则，我来帮你补全并梳理核心要点：

完整的Apache配置文件示例 #

先把你的配置补全，同时加上HTTPS（443端口）的配置，还有Vue路由重写的关键规则：

# 80端口：强制跳转至HTTPS
<VirtualHost *:80>
    ServerAdmin myemail@gmail.com
    ServerName mydomain.me
    ServerAlias www.mydomain.me

    # 所有HTTP请求永久重定向到HTTPS
    RewriteEngine On
    RewriteRule ^(.*)$ https://%{HTTP_HOST}$1 [R=301,L]

    ErrorLog ${APACHE_LOG_DIR}/mydomain-error.log
    CustomLog ${APACHE_LOG_DIR}/mydomain-access.log combined
</VirtualHost>

# 443端口：HTTPS服务核心配置
<VirtualHost *:443>
    ServerAdmin myemail@gmail.com
    ServerName mydomain.me
    ServerAlias www.mydomain.me

    DocumentRoot /var/www/mydomain.me/dist

    # HTTPS证书配置（替换成你的实际证书路径）
    SSLEngine on
    SSLCertificateFile /path/to/your/certificate.crt
    SSLCertificateKeyFile /path/to/your/private.key
    # 如果有中间证书，取消注释下面这行
    # SSLCertificateChainFile /path/to/your/chain.crt

    ErrorLog ${APACHE_LOG_DIR}/mydomain-ssl-error.log
    CustomLog ${APACHE_LOG_DIR}/mydomain-ssl-access.log combined

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

        # Vue单页应用核心：路由重写规则
        RewriteEngine On
        # 若请求的不是真实文件/目录，转发到index.html处理前端路由
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^(.*)$ /index.html [L]
    </Directory>
</VirtualHost>

关键配置说明 #

• HTTP强制跳转HTTPS：80端口不再处理业务请求，直接301永久重定向到HTTPS，这是HTTPS部署的标准做法，避免用户访问不安全的HTTP地址。
• HTTPS证书配置：必须正确指定证书文件路径，确保Apache能读取这些文件（可设置权限为www-data可读）。如果是Let's Encrypt证书，路径通常是/etc/letsencrypt/live/mydomain.me/下的fullchain.pem和privkey.pem。
• Vue路由重写：因为Vue是单页应用，所有前端路由（比如/about、/dashboard）实际上都指向index.html，Apache需要把这些非静态资源的请求转发到入口文件，否则刷新页面会出现404错误。
• 权限与重写开关：AllowOverride All确保Directory内的Rewrite规则生效，Require all granted允许所有用户访问该目录。

必要的Apache模块启用 #

确保你已经开启了以下核心模块：

sudo a2enmod rewrite
sudo a2enmod ssl
sudo systemctl restart apache2

额外排查要点 #

1. 确认Vue项目已正确打包：执行npm run build生成dist目录，且目录下存在index.html和静态资源文件夹（js、css、assets等）。
2. 检查dist目录权限：执行sudo chown -R www-data:www-data /var/www/mydomain.me/dist，确保Apache运行用户有读取权限。
3. 验证配置有效性：执行sudo apache2ctl configtest，返回Syntax OK后再重启Apache。

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