如何在Laravel 10的Vite配置中自动导入resources下所有JS/CSS？

方法一：使用Glob模式（推荐，无需额外依赖） #

Vite原生支持Glob文件匹配语法，直接在vite.config.js的input数组中使用通配符即可自动匹配目标目录下的所有文件（包括子目录）。

修改你的vite.config.js：

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                // 匹配resources/css下所有子目录的.css文件
                'resources/css/**/*.css',
                // 匹配resources/js下所有子目录的.js文件
                'resources/js/**/*.js',
                // 若有第三方依赖需单独引入，可在此添加（如已在JS/CSS中导入则无需重复）
                // 'node_modules/bootstrap/dist/css/bootstrap.min.css'
            ],
            refresh: true,
        }),
    ],
});

补充说明：

• **/*.css表示匹配resources/css目录及其所有子目录下的.css文件，**/*.js同理。
• 如需排除特定文件/目录，可在匹配规则前加!前缀，例如：'!resources/css/test/**/*.css'（排除test目录下的所有CSS文件）。
• Blade模板中，可直接使用@vite指令加载所有匹配的资源；若仍需单独加载某个文件，原@vite(['resources/js/myjs.js'])写法依然有效。

方法二：Node.js fs模块手动遍历（适合自定义逻辑场景） #

如果需要更复杂的文件筛选逻辑（比如按文件名规则过滤），可以用Node.js的fs和path模块手动遍历目录，收集目标文件。

修改你的vite.config.js：

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

// 递归遍历目录，获取指定后缀的文件路径数组
function collectFiles(dir, fileExt) {
    let fileList = [];
    const items = fs.readdirSync(dir, { withFileTypes: true });

    for (const item of items) {
        const fullPath = path.join(dir, item.name);
        if (item.isDirectory()) {
            // 递归遍历子目录
            fileList = fileList.concat(collectFiles(fullPath, fileExt));
        } else if (item.name.endsWith(fileExt)) {
            fileList.push(fullPath);
        }
    }
    return fileList;
}

export default defineConfig({
    plugins: [
        laravel({
            input: [
                ...collectFiles('resources/css', '.css'),
                ...collectFiles('resources/js', '.js'),
                // 第三方依赖按需添加
            ],
            refresh: true,
        }),
    ],
});

注意事项 #

1. 开发模式下，Vite会自动检测新增文件并热更新，无需重启服务器。
2. 生产构建时，新增文件需重新执行npm run build，确保资源被打包到public/build目录。
3. 避免将无关文件（如临时文件、测试脚本）放入resources/css或resources/js目录，否则会被Vite误打包。

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