vuerouter 的 HTML5 历史记录模式在生产环境中不起作用

Question

在我的 Laravel 和 Vue.js V2 项目中，我实现了具有历史记录模式的 Vue Router v3。它在我的开发机器上完美运行。但是，一旦我切换到生产环境，我就会收到错误消息“在此服务器上找不到请求的 URL。”

我按照官方文档（https://v3.router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations）进行操作，但没有任何改进。

我在 laravel 中的 .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>

和我的 /etc/apache2/sites-available/laravel.conf

NameVirtualHost *:8080
Listen 8080

<VirtualHost *:8080>
        # The ServerName directive sets the request scheme, hostname and port that
        # the server uses to identify itself. This is used when creating
        # redirection URLs. In the context of virtual hosts, the ServerName
        # specifies what hostname must appear in the request's Host: header to
        # match this virtual host. For the default virtual host (this file) this
        # value is not decisive as it is used as a last resort host regardless.
        # However, you must set it for any further virtual host explicitly.
        #ServerName www.example.com

        ServerAdmin [email protected]
        ServerName prod.mycompany.net
        ServerAlias laravel
        DocumentRoot /var/www/html/laravel/public

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

        # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
        # error, crit, alert, emerg.
        # It is also possible to configure the loglevel for particular
        # modules, e.g.
        #LogLevel info ssl:warn

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

        # For most configuration files from conf-available/, which are
        # enabled or disabled at a global level, it is possible to
        # include a line for only one particular virtual host. For example the
        # following line enables the CGI configuration for this host only
        # after it has been globally disabled with "a2disconf".
        #Include conf-available/serve-cgi-bin.conf

</VirtualHost>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

和我的 apache 版本

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

有人知道问题出在哪里吗？

Answer 1

您应该删除 .htaccess 文件中的 index.html 处理（它是否存在于 /var/www/html/laravel/public 中？），并让 Laravel 路由指向将为您的 Vue.js 应用程序提供服务的控制器。