Laravel9集成Vue3时Vue Router路由配置404问题

问题分析 #

你遇到的问题核心是：Vue Router使用history模式时，前端路由请求被误转发到Laravel后端（8000端口），而后端未配置对应/tasks的路由，导致返回404。根路径/能正常加载，是因为前端开发服务器直接返回了index.html，由Vue Router接管处理。

解决方案 #

1. 修正Vue Router的基础路径 #

在router.js中，确保createWebHistory的基础路径与前端开发服务器的根路径一致：

import { createRouter, createWebHistory } from "vue-router";
import TaskListComponent from "./components/TaskListComponent.vue";

const router = createRouter({
    history: createWebHistory('/'), // 明确指定前端根路径
    routes: [
        {
            path: '/tasks',
            name: 'tasks.list',
            component: TaskListComponent
        }
    ]
})

export default router

2. 配置前端开发服务器的代理规则（避免转发前端路由） #

如果使用Laravel默认的Vite作为开发服务器，修改vite.config.js，仅将API请求转发到Laravel后端，排除前端路由路径：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/bootstrap.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        proxy: {
            // 仅代理API前缀的请求到后端
            '/api': {
                target: 'http://localhost:8000',
                changeOrigin: true,
            },
            // 前端路由直接由本地服务器处理
            '/tasks': {
                target: 'http://localhost:8080',
                changeOrigin: true,
            },
        },
    },
});

3. 配置Laravel后端的Fallback路由（生产环境必备） #

部署到生产环境时，所有未匹配后端路由的请求都需要返回Vue的index.html，让Vue Router处理。在routes/web.php中添加：

use Illuminate\Support\Facades\Route;

// 你的其他后端路由...

// 前端路由兜底规则，匹配所有未定义的路径
Route::get('/{any}', function () {
    return view('welcome'); // 该视图需包含Vue挂载点
})->where('any', '.*');

确保resources/views/welcome.blade.php正确引入Vite编译资源：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel + Vue</title>
    @vite('resources/js/bootstrap.js')
</head>
<body>
    <div id="app"></div>
</body>
</html>

4. 重启服务验证 #

修改配置后，重启Laravel和Vite服务：

# 重启Laravel后端服务
php artisan serve

# 重启Vite前端开发服务器
npm run dev

此时访问localhost:8080/tasks会由Vue Router直接处理，加载目标组件，不再转发到后端8000端口。

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