Laravel + Inertia + Vue3 多项目配置指南：路由隔离与动态入口优化

安装项目及配置

后端配置：Laravel 12.x，Inertia-laravel

composer create-project laravel/laravel example-app
composer require inertiajs/inertia-laravel
#  ...

前端配置：Vue 3.x，Vite 6.x，Tailwind CSS

npm install vue@next
npm install @inertiajs/vue3
npm install vite
npm install tailwindcss
#  ...

路由配置

后端路由分组与中间件配置

# bootstrap/app.php
 ->withRouting(
        web: __DIR__.'/../routes/web.php',
        api: __DIR__.'/../routes/api.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
        then: function () {
            Route::middleware('web')->prefix('project1')->name('project1.')->group(base_path('routes/project1.php'));
            Route::middleware('web')->prefix('project2')->name('project2.')->group(base_path('routes/project2.php'));
            Route::middleware('web')->prefix('project3')->name('project3.')->group(base_path('routes/project3.php'));
        },
    )

 ->withMiddleware(function (Middleware $middleware): void {
        $middleware->web(append: [
            HandleInertiaRequests::class,
        ]);
    })

中间件设置app/Http/Middleware/HandleInertiaRequests.php

use Inertia\Middleware;
class HandleInertiaRequests extends Middleware
{
   public function rootView(Request $request): string
    {
        $prefix = explode('.', $request->route()->getName())[0] ?? '';
        $views = [ 'project1', 'project2', 'project3'];
        return in_array($prefix, $views) ? $prefix : 'web';
    }
}

前端入口模板配置

# resources/views/project1.blade.php
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title inertia>{{ config('app.name', 'Laravel') }}</title>
    @inertiaHead
    @vite(['resources/css/app.css','resources/js/project1.js', "resources/js/pages/project1/{$page['component']}.vue"])
</head>
<body>
@inertia
</body>
</html>

加这个的好处是 resources/js/pages/project1/{$page['component']}.vue 可以根据路由动态加载对应的vue文件提前判断是否存在这个页面不用到底加载哪些页面减少资源加载提高性能

多入口Vite配置

 laravel({
    input: [
        'resources/css/app.css',
        'resources/js/entries/project1.js',
        'resources/js/entries/project2.js',
        'resources/js/entries/project3.js',
        // ...
    ],
    refresh: true,
    ssr:'resources/js/ssr.js',
})

vue项目配置

resources/
├── js/
│   ├── project1/           # 项目1
│   ├── project2/           # 项目2
│   ├── project3/           # 项目3
│   ├── entries/
│   │   ├── project1.js     # 项目1入口
│   │   ├── project2.js     # 项目2入口
│   │   └── project3.js     # 项目3入口