Vue Router HTML5 History模式生产环境无法运行问题求助

问题概述 #

在Laravel + Vue.js V2项目中使用Vue Router v3的History模式，开发环境运行正常，但切换到生产环境后，访问前端路由时出现**The requested URL was not found on this server.**错误，已按官方文档配置但问题未解决。

当前配置信息 #

.htaccess 配置 #

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

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

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

Apache虚拟主机配置（/etc/apache2/sites-available/laravel.conf） #

NameVirtualHost *:8080
Listen 8080

<VirtualHost *:8080>
        ServerAdmin admin@example.com
        ServerName prod.mycompany.net
        ServerAlias laravel
        DocumentRoot /var/www/html/laravel/public

        <Directory "/var/www/html/laravel">
                Options Indexes FollowSymLinks MultiViews
                AllowOverride All
        </Directory>

        LogLevel debug
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Apache版本 #

Server version: Apache/2.4.41 (Ubuntu)
Server built:   2023-03-08T17:32:54

问题原因及修复方案 #

1. .htaccess规则冲突 #

你的.htaccess中同时存在两套路由转发规则：

• Vue Router官方规则（将请求转发到index.html）
• Laravel默认前端控制器规则（将请求转发到index.php）

在Laravel项目架构中，所有请求需先经过Laravel的index.php处理，再由Laravel返回Vue入口页面，最终由Vue Router接管前端路由。因此需要删除Vue Router的规则，保留Laravel标准配置：

修正后的.htaccess：

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

2. Apache虚拟主机Directory路径错误 #

你的DocumentRoot指向/var/www/html/laravel/public，但Directory配置的是/var/www/html/laravel，导致public目录下的.htaccess无法生效（AllowOverride All未作用到正确目录）。

修正后的Directory配置：

<Directory "/var/www/html/laravel/public">
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
</Directory>

3. 完善Laravel路由配置 #

在Laravel的routes/web.php中添加通配路由，确保所有前端路由请求都返回Vue入口视图：

Route::get('/{any}', function () {
    return view('app'); // 此处视图名需与你的Vue入口blade文件对应
})->where('any', '.*');

4. 验证Apache模块启用状态 #

执行以下命令启用必要模块并重启Apache：

sudo a2enmod rewrite negotiation
sudo systemctl restart apache2

5. 确认配置生效 #

• 重启Apache后，尝试访问前端路由（如prod.mycompany.net:8080/about）
• 查看Apache错误日志（/var/log/apache2/error.log），排查是否有新的错误提示

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