Laravel中修改Vite Manifest目录或部署两个Vite项目的方法

一、修复「Vite manifest not found」错误并配置双输出目录 #

错误根源是Laravel的Vite插件默认在public/build目录查找manifest文件，而你的配置将产物输出到了public/js/app，只需显式指定插件的buildDirectory参数，并配置双入口即可解决：

修改vite.config.js如下：

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

export default defineConfig({
    plugins: [
        laravel({
            // 配置两个前端入口文件
            input: [
                "resources/js/app/main.jsx",
                "resources/js/admin/main.jsx"
            ],
            // 告诉Laravel插件manifest文件的根目录（相对于public）
            buildDirectory: "js"
        }),
        react()
    ],
    build: {
        // 输出根目录指定为public/js
        outDir: "public/js",
        rollupOptions: {
            input: {
                app: "resources/js/app/main.jsx",
                admin: "resources/js/admin/main.jsx"
            },
            // 配置输出路径，避免两个前端的资源文件冲突
            output: {
                entryFileNames: "[name]/main.js",
                chunkFileNames: "[name]/[hash].js",
                assetFileNames: "[name]/[hash][extname]"
            }
        }
    }
});

构建完成后，产物会分别输出到public/js/app和public/js/admin，manifest文件生成在public/js/manifest.json，Laravel可正常识别。

在Blade模板中按入口引用资源：

{{-- app前端页面 --}}
@vite('resources/js/app/main.jsx')

{{-- admin前端页面 --}}
@vite('resources/js/admin/main.jsx')

二、其他可行的多Vite项目部署方案 #

1. 使用独立的Vite配置文件 #

为app和admin分别创建独立配置文件，实现完全隔离的配置：

vite.app.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app/main.jsx",
            buildDirectory: "js/app"
        }),
        react()
    ],
    build: {
        outDir: "public/js/app"
    }
});

vite.admin.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/admin/main.jsx",
            buildDirectory: "js/admin"
        }),
        react()
    ],
    build: {
        outDir: "public/js/admin"
    }
});

在package.json中添加脚本，分别控制两个项目的开发和构建：

{
  "scripts": {
    "dev:app": "vite --config vite.app.config.js",
    "dev:admin": "vite --config vite.admin.config.js",
    "build:app": "vite build --config vite.app.config.js",
    "build:admin": "vite build --config vite.admin.config.js",
    "build": "npm run build:app && npm run build:admin"
  }
}

2. 使用环境变量切换入口 #

通过环境变量指定当前构建的前端项目，减少配置重复：

修改vite.config.js：

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

const frontend = process.env.APP_FRONTEND || "app";

export default defineConfig({
    plugins: [
        laravel({
            input: `resources/js/${frontend}/main.jsx`,
            buildDirectory: `js/${frontend}`
        }),
        react()
    ],
    build: {
        outDir: `public/js/${frontend}`
    }
});

在package.json中添加脚本：

{
  "scripts": {
    "dev:app": "APP_FRONTEND=app vite",
    "dev:admin": "APP_FRONTEND=admin vite",
    "build:app": "APP_FRONTEND=app vite build",
    "build:admin": "APP_FRONTEND=admin vite build"
  }
}

3. 采用Monorepo目录结构 #

将app和admin作为独立子项目放在frontend目录下，各自维护自己的依赖和配置，构建后将产物输出到Laravel的public/js目录：

目录结构示例：

project-root/
├── frontend/
│   ├── app/
│   │   ├── src/
│   │   ├── vite.config.js
│   │   └── package.json
│   └── admin/
│       ├── src/
│       ├── vite.config.js
│       └── package.json
├── public/
│   ├── js/
│   │   ├── app/
│   │   └── admin/
└── resources/

这种方案适合前端团队独立开发的场景，完全解耦前后端代码。

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