Laravel 10 + Vue 3 路由失效，访问路径出现404错误求助

问题核心 #

使用Vue Router的history模式时，直接在浏览器地址栏输入前端路由（如/home），浏览器会向Laravel服务器发起请求，但Laravel没有对应路由配置，因此返回404错误。需要让Laravel将所有前端路由请求转发到Vue应用的入口页面。

解决步骤 #

1. 配置Laravel兜底路由 #

在routes/web.php文件的末尾添加以下代码，确保所有未匹配的路由请求都指向welcome.blade.php：

Route::get('/{any}', function () {
    return view('welcome');
})->where('any', '.*');

注意：此路由必须放在所有Laravel后端路由的最后，避免覆盖API或其他自有页面路由。

2. 验证服务器配置 #

• Apache环境：Laravel默认的public/.htaccess已包含history模式支持，无需额外修改。
• Nginx环境：在站点配置中添加以下规则，确保请求能正确转发到Vue应用：

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

3. 清除Laravel缓存 #

运行以下命令清除路由和配置缓存，确保新的路由规则生效：

php artisan route:clear
php artisan config:clear

4. 检查组件路径 #

确认routes.js中导入的Vue组件路径正确，Linux系统需注意文件名大小写（比如Home.vue和home.vue会被视为不同文件）。

测试 #

重启Laravel服务后，访问/home、/register等路由，Vue Router即可正常渲染对应组件。

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