如何配置Laravel Vite引用vendor目录JS文件时实现实时刷新？

问题根源 #

npm run build正常但npm run dev报错，核心原因是Vite在dev模式下采用原生ES模块加载机制，而自定义包的JS文件位于vendor目录：

1. Vite默认限制文件系统访问范围，vendor不在允许列表内
2. 自定义包中的裸导入（如import 'flowbite'）无法自动定位到主应用的node_modules目录
3. Vite的依赖预构建流程未覆盖vendor目录下的自定义包文件

解决方案：调整Vite配置 #

修改vite.config.js，补充文件访问权限、模块解析路径和预构建范围设置：

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

export default defineConfig({
    optimizeDeps: {
        include: [
            'flowbite',
            'alpinejs',
            // 将自定义包的JS文件加入预构建范围
            'vendor/foobar/dashboard/resources/js/dashboard.js',
            'vendor/foobar/customer-portal/resources/js/customer-portal.js',
            'vendor/foobar/payments-stripe/resources/js/payments-stripe.js',
        ],
    },
    resolve: {
        // 明确指定主应用node_modules为模块搜索目录
        modules: [path.resolve(__dirname, 'node_modules')],
    },
    server: {
        fs: {
            // 允许Vite访问vendor目录
            allow: ['vendor'],
        },
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'vendor/foobar/dashboard/resources/js/dashboard.js',
                'vendor/foobar/customer-portal/resources/js/customer-portal.js',
                'vendor/foobar/payments-stripe/resources/js/payments-stripe.js',
            ],
            refresh: true,
            valetTls: 'foobar.test',
        }),
    ],
});

配置说明 #

• server.fs.allow: ['vendor']：突破Vite的安全访问限制，允许读取vendor目录下的文件
• resolve.modules：强制Vite从主应用的node_modules查找依赖，解决自定义包中裸导入的路径解析问题
• optimizeDeps.include：让Vite预构建自定义包JS的依赖，避免dev模式下动态加载时的解析错误

备选方案：使用别名指向本地包目录 #

如果自定义包是本地同级开发的，可直接用别名绕过vendor的符号链接，更利于开发阶段的热更新：

// vite.config.js 新增resolve.alias配置
resolve: {
    alias: {
        '@foobar/dashboard': path.resolve(__dirname, '../dashboard/resources/js'),
        '@foobar/customer-portal': path.resolve(__dirname, '../customer-portal/resources/js'),
        '@foobar/payments-stripe': path.resolve(__dirname, '../payments-stripe/resources/js'),
    },
}

然后在主应用入口或模板中导入：

import '@foobar/dashboard/dashboard.js';

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