如何配置Laravel+Jetstream+Inertia：前端Svelte、后台Vue共存？

1. 是否可以按需求配置？ #

完全可行。Inertia 本身支持在同一个 Laravel 项目中集成多个前端框架，只要正确处理初始化逻辑和组件路由匹配即可实现「/admin 路由用 Vue，其余用 Svelte」的需求。

2. 正确的配置步骤 #

步骤1：补充依赖安装 #

确保已完成 Laravel+Jetstream+Inertia+Vue 的基础安装，再添加 Svelte 相关依赖：

npm install @inertiajs/svelte svelte @sveltejs/vite-plugin-svelte

步骤2：调整 Vite 配置 #

修改 vite.config.js，同时启用 Vue 和 Svelte 编译插件，确保两者都能被正确处理：

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
        svelte(),
    ],
});

步骤3：重构入口文件与组件目录 #

• 修改 resources/js/app.js，根据当前路由前缀动态选择初始化 Vue 或 Svelte 版 Inertia：

  import { createApp, h } from 'vue';
  import { createInertiaApp } from '@inertiajs/vue3';
  import { createInertiaApp as createInertiaSvelte } from '@inertiajs/svelte';
  import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
  import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
  
  // 判断当前是否为后台路由
  const isAdminRoute = window.location.pathname.startsWith('/admin');
  
  if (isAdminRoute) {
      // 初始化 Vue 版 Inertia，加载 Admin 目录下的 Vue 组件
      createInertiaApp({
          resolve: (name) => resolvePageComponent(
              `./Pages/Admin/${name}.vue`,
              import.meta.glob('./Pages/Admin/**/*.vue')
          ),
          setup({ el, App, props, plugin }) {
              return createApp({ render: () => h(App, props) })
                  .use(plugin)
                  .use(ZiggyVue)
                  .mount(el);
          },
      });
  } else {
      // 初始化 Svelte 版 Inertia，加载 Front 目录下的 Svelte 组件
      createInertiaSvelte({
          resolve: (name) => resolvePageComponent(
              `./Pages/Front/${name}.svelte`,
              import.meta.glob('./Pages/Front/**/*.svelte')
          ),
          setup({ el, App, props }) {
              new App({ target: el, props });
          },
      });
  }
  

• 整理组件目录：
  • 将后台 Vue 组件（包括 Jetstream 自带的 Dashboard、Profile 等）放在 resources/js/Pages/Admin/
  • 将前端 Svelte 组件放在 resources/js/Pages/Front/

步骤4：配置 Laravel 路由 #

在 routes/web.php 中按前缀区分路由对应的组件：

use Inertia\Inertia;

// 前端 Svelte 路由
Route::get('/', fn () => Inertia::render('Front/Home'));
// 其他前端业务路由...

// 后台 Vue 路由
Route::prefix('admin')->group(function () {
    Route::get('/', fn () => Inertia::render('Admin/Dashboard'));
    // 复用 Jetstream 自带的后台路由（如个人资料、团队管理），确保组件指向 Admin 目录下的 Vue 文件
    require __DIR__.'/admin.php'; // 可拆分单独的后台路由文件
});

步骤5：验证与调试 #

运行 npm run dev 和 php artisan serve，分别访问前端路由和 /admin 路由，检查组件是否正确渲染。若出现编译错误，优先检查 Vite 插件配置和组件路径是否匹配。

3. 替代方案（若遇兼容问题） #

如果多框架集成出现难以排查的问题，可考虑以下方案：

• 子域名分离部署：将后台管理面板部署在 admin.yourdomain.com，单独使用 Laravel+Jetstream+Vue；前端部署在主域名，使用 Laravel+Inertia+Svelte，两者通过 API 共享数据。
• 统一框架：将后台 Vue 组件迁移为 Svelte，或前端改用 Vue，避免多框架切换的复杂度（适合对框架一致性有要求的场景）

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