Laravel 子目录中运行 Vue 实例：问题与解决方案

在 Laravel 子目录中运行 Vue 实例：深入剖析

在构建大型 Laravel 应用程序时，将不同的仪表盘分配给用户和管理员的需求很常见。然而，将 Vue 实例运行在子目录中时，Vue 路由经常会出现问题，因为它会在所有链接前加上根 URL '/'。

本指南将详细介绍如何在 Laravel 子目录中正确配置 Vue 路由和 Laravel 路由，从而解决此问题。

配置 Laravel 路由

首先，在 web.php 路由文件中为用户仪表盘和管理员仪表盘定义路由：

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

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

配置 Vue 路由

接下来，在 Vue 路由中配置 base 选项，将所有路由链接前缀为子目录 URL：

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

修改 Vite 配置

禁用 Vite 中 URL 转换的默认行为：

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

结论

遵循这些步骤，您将能够在 Laravel 子目录中成功运行 Vue 实例。Vue 路由链接将正确前缀为 /user-dashboard/，应用程序将可以在不同的域上无缝运行。

常见问题解答

Q1：为什么默认的 Vue 路由行为不适合在子目录中使用？
A1：默认情况下，Vue 路由会将所有路由链接前缀为 '/'，这使得在子目录中运行 Vue 实例时无法正确访问资源。

Q2：base 选项的作用是什么？
A2：base 选项允许您指定路由链接的前缀，从而告诉 Vue 路由从哪个 URL 路径开始生成链接。

Q3：禁用 Vite 中的 URL 转换有什么影响？
A3：禁用 URL 转换可防止 Vite 将子目录 URL 转换为根 URL，从而确保 Vue 路由链接正确前缀为子目录 URL。

Q4：为什么要使用 middleware 来保护路由？
A4：middleware 用于确保只有经过身份验证且已验证的用户才能访问受保护的路由，例如用户仪表盘。

Q5：是否可以在 Vue 路由中使用其他选项来解决此问题？
A5：是的，您可以使用 mode 选项将 Vue 路由配置为 history 模式，这将使用浏览器的历史记录 API 来管理路由。然而，此模式需要服务器端配置，这在 Laravel 中可能比较复杂。