如何在Laravel Vite构建中按主题设置文件夹结构

当前配置仅能正确生成JS文件的主题化文件夹结构，但CSS文件的目录结构不符合预期。期望构建后生成如下按主题划分的目录结构：

public/build/frontend/theme1/filename.css
public/build/frontend/theme1/filename.js
public/build/frontend/theme2/filename.css
public/build/frontend/theme2/filename.js

现有Vite配置代码：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';

export default defineConfig({
    build: {
        outDir: '../build',
        emptyOutDir: true,
        cssCodeSplit: true
    },
    plugins: [
        laravel({
            input: {
                'js/app': 'resources/js/app.build.js',
                
                /*******************************START theme-name*********************************************/
                'frontend/theme-name/general': 'resources/assets/frontend-themes/theme-name/js/build/common.build.js',
                'frontend/theme-name/bootstrap': 'resources/assets/frontend-themes/theme-name/css/bootstrap.min.css',
                'frontend/theme-name/cart.css': 'resources/assets/frontend-themes/theme-name/css/cart.css',
                /*******************************END theme-name*********************************************/
            },
            output: {
                entryFileNames: (assetInfo) => {
                  // assetInfo.facadeModuleId contains the file's full path
                  if (assetInfo.facadeModuleId) {
                    const assetPath = path.dirname(assetInfo.facadeModuleId).replace(rootDir, '');
                    return assetPath + '/[name]-[hash].js';
        
                  } else {
                    return 'assets/js/[name]-[hash].js';
                  }
                },
              },
            refresh: true,
        }),

        commonjs(),
        nodeResolve()
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
        }
    },
});

问题核心是你只配置了entryFileNames（控制JS入口文件输出路径），但CSS等资源文件的输出路径需要通过assetFileNames配置来控制，同时原配置中未定义rootDir变量会导致路径处理失败。

修改后的完整配置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';

// 定义项目根目录
const rootDir = path.resolve(__dirname);

export default defineConfig({
    build: {
        outDir: '../build',
        emptyOutDir: true,
        cssCodeSplit: true
    },
    plugins: [
        laravel({
            input: {
                'js/app': 'resources/js/app.build.js',
                
                /*******************************START theme-name*********************************************/
                'frontend/theme-name/general': 'resources/assets/frontend-themes/theme-name/js/build/common.build.js',
                'frontend/theme-name/bootstrap': 'resources/assets/frontend-themes/theme-name/css/bootstrap.min.css',
                'frontend/theme-name/cart.css': 'resources/assets/frontend-themes/theme-name/css/cart.css',
                /*******************************END theme-name*********************************************/
            },
            output: {
                entryFileNames: (assetInfo) => {
                  if (assetInfo.facadeModuleId) {
                    const assetPath = path.dirname(assetInfo.facadeModuleId).replace(rootDir, '');
                    return `${assetPath}/[name]-[hash].js`;
                  } else {
                    return 'assets/js/[name]-[hash].js';
                  }
                },
                // 新增CSS等资源文件的输出路径配置
                assetFileNames: (assetInfo) => {
                  if (assetInfo.facadeModuleId) {
                    const assetPath = path.dirname(assetInfo.facadeModuleId).replace(rootDir, '');
                    return `${assetPath}/[name]-[hash][extname]`;
                  } else {
                    return 'assets/css/[name]-[hash][extname]';
                  }
                }
              },
            refresh: true,
        }),

        commonjs(),
        nodeResolve()
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
        }
    },
});

修改说明 #

1. 定义rootDir变量：明确项目根目录，确保路径替换逻辑正常工作
2. 新增assetFileNames配置：针对CSS等资源文件，复用JS的路径处理逻辑，让CSS文件输出到对应主题目录下
3. 统一路径格式：使用模板字符串简化路径拼接，避免语法错误

这样修改后，JS和CSS文件都会根据源文件所在目录，输出到对应的frontend/theme-xxx目录下，符合预期的主题化文件夹结构。

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