vuerouter 的 HTML5 历史模式在生产中不起作用

HTML5 History Mode from vuerouter not work in production

提问人:Zekura 提问时间:9/27/2023 更新时间:10/13/2023 访问量:143

问:

在我的 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

有谁知道问题可能来自哪里?

拉维尔 Apache .htaccess vuejs2 vue-router

评论


答:

0赞 bibiseb 10/5/2023 #1

你应该删除你的 .htaccess 文件中的索引 .html 处理(它是否存在于 /var/www/html/laravel/public 中?),并让 Laravel 路由指向将为您的 Vue.js 应用程序提供服务的控制器。

0赞 Sw0ut 10/6/2023 #2

您是否在路由文件(web.php)中放置了后备路由?

Route::fallback(function() {
    return view('index');
});

将 index 替换为 Vue 应用的实际刀片起点。

0赞 Zekura 10/13/2023 #3

我发现错误。它来自 .htaccess。

优秀的.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>