Laravel集成Vue实例在子目录下路由异常问题排查

1. 修正Vue Router的Base路径配置 #

Vue Router 4中，base参数需要传递给createWebHistory方法，而非在路由实例配置项中单独设置。修改你的routes/index.js：

import { createWebHistory, createRouter } from "vue-router";
import Home from "../views/HomeView.vue";
import Profile from '../views/ProfileView.vue';
import NotFound from '../views/NotFoundView.vue';

const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
    },
    {
        path: "/profile",
        name: "Profile",
        component: Profile,
    },
    {
        path: "/:catchAll(.*)",
        component: NotFound,
    },  
];

// 将base路径传入createWebHistory
const router = createRouter({
    history: createWebHistory('/user-dashboard/'),
    routes,
});

export default router;

如果需要区分用户后台和管理员后台的路由逻辑，建议创建两个独立的路由文件（如user-routes.js和admin-routes.js），分别设置对应base路径后，在各自的入口JS文件中挂载。

2. 调整Laravel路由以支持Vue子路由 #

当前Laravel仅匹配了/user-dashboard根路径，用户访问/user-dashboard/profile这类子路由时会返回404。修改web.php，让所有/user-dashboard/*的请求都返回用户后台视图：

Route::get('/user-dashboard/{any?}', function () {
    return view('userdashboard');
})->where('any', '.*')->middleware(['auth', 'verified'])->name('user.dashboard');

Route::get('/dashboard/{any?}', function () {
    return view('dashboard');
})->where('any', '.*')->middleware(['auth', 'verified'])->name('dashboard');

{any?}和->where('any', '.*')用于匹配该路径下的所有子路由，确保Vue Router能接管路由处理逻辑。

3. 确保组件中使用Vue Router的链接方式 #

在Vue组件中必须使用<router-link>标签生成路由链接，而非原生<a>标签，这样Vue Router才会自动拼接base路径：

<router-link to="/">首页</router-link>
<router-link to="/profile">个人资料</router-link>

若使用原生<a>标签，链接会直接跳转到根路径的/profile，而非预期的/user-dashboard/profile。

4. 验证Vite资源路径（可选） #

如果遇到资源加载路径异常，可在vite.config.js中指定base属性，不过Laravel Vite插件通常会自动处理资源路径，仅在必要时添加：

export default defineConfig({
    base: '/user-dashboard/', // 可根据环境使用环境变量区分，避免多后台冲突
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

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