Vue3开启history模式的router生产环境刷新/直接访问路径报404问题

你遇到的是Vue Router history模式的典型服务端配置问题：history模式下的路由仅在前端生效，服务端不存在对应路径的实体文件，直接访问/刷新时Apache会尝试读取磁盘上不存在的路径资源，因此返回404错误，需要配置Apache将所有非静态资源请求重定向到入口index.html，交给前端路由处理。

现有配置的问题&修正方案 #

你写的重写规则逻辑本身是对的，但是有几个配置项冲突导致规则不生效：

1. 去掉Options中的MultiViews参数：Apache的MultiViews内容协商功能会优先匹配磁盘上的近似路径资源，优先级高于重写规则，会导致重定向失效。
2. 删除旧版本Apache权限控制语法：Order allow,deny和allow from all是Apache 2.2版本的语法，和2.4及以上版本的Require all granted混写可能引发权限冲突，直接删除旧配置即可。

修正后的Directory段配置如下：

<Directory "/var/www/vue.tatrytec.eu/dist">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted               

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

后续操作步骤 #

• 确认Apache rewrite模块已开启，执行命令：a2enmod rewrite
• 保存修改后的配置文件，执行命令：systemctl reload apache2 重载配置生效
• 可选：如果开启了Apache缓存，建议先清理缓存再测试访问
• 测试刷新页面、直接访问子路径验证是否生效

异常排查 #

如果修改后仍无法访问，按以下顺序排查：

• 检查/var/www/vue.tatrytec.eu/dist路径下是否存在index.html文件
• 检查dist目录及内部文件的权限是否允许Apache进程读取，建议目录权限设置为755
• 查看Apache错误日志${APACHE_LOG_DIR}/www/vue.tatrytec.eu/error.log定位具体报错

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