如何在Laravel扩展包中使用Vite？解决manifest.json路径错误

你在本地开发带视图的Laravel扩展包时，采用Vite构建CSS和JS资源，但遇到Vite始终去主项目public目录查找manifest.json，而非扩展包vendor目录对应位置的问题，报错信息：

Vite manifest not found at: /Users/User/Sites/laravel-project/public/build/manifest.json

你当前在扩展包视图中注册资源的代码：

@vite(['resources/css/app.css', 'resources/js/app.js'])

具体解决步骤 #

1. 给扩展包单独配置Vite
   在扩展包根目录创建vite.config.js，指定构建输出目录与manifest文件位置，示例：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            publicDirectory: 'public', // 扩展包自身的public目录
            buildDirectory: 'build',
            manifest: true,
        }),
    ],
});

2. 修改扩展包视图的资源引用方式
   默认@vite指令是为主项目配置的，无法直接适配扩展包。可以手动读取扩展包的manifest并生成资源链接，示例：

@php
    // 替换成你扩展包的manifest实际路径
    $manifestPath = __DIR__.'/../public/build/manifest.json';
    $manifest = json_decode(file_get_contents($manifestPath), true);
    // 资源URL前缀对应后续发布到主项目的路径
    $cssUrl = '/vendor/your-package-name/build/'.$manifest['resources/css/app.css']['file'];
    $jsUrl = '/vendor/your-package-name/build/'.$manifest['resources/js/app.js']['file'];
@endphp

<link rel="stylesheet" href="{{ $cssUrl }}">
<script src="{{ $jsUrl }}"></script>

也可以在扩展包的服务提供者中注册自定义Blade指令，封装上述逻辑，方便视图复用。

3. 配置扩展包资源发布
   在扩展包的服务提供者中添加资源发布逻辑，将扩展包构建好的资源发布到主项目可访问的目录：

public function boot()
{
    $this->publishes([
        __DIR__.'/../public/build' => public_path('vendor/your-package-name/build'),
    ], 'your-package-assets');
}

然后执行发布命令：

php artisan vendor:publish --tag=your-package-assets

核心说明 #

默认@vite指令仅适配主项目的Vite配置，扩展包需要独立处理资源构建与加载逻辑，通过自定义资源引用+资源发布的方式，让主项目能正确访问到扩展包的Vite构建产物。

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