提问人:Zekura 提问时间:9/27/2023 更新时间:10/13/2023 访问量:143
vuerouter 的 HTML5 历史模式在生产中不起作用
HTML5 History Mode from vuerouter not work in production
问:
在我的 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
有谁知道问题可能来自哪里?
答:
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>
评论