Laravel 10+Vue2.7项目Vite配置：多入口及保留目录结构

我有一个Laravel 10 + Vue 2.7的项目，已经从Mix迁移到Laravel Vite，当前项目目录结构如下：

/resources
----/js
--------/container
------------/student
----------------app.js
----------------cancel.js
------------/teacher
----------------app.js
----------------apply.js
--------/components
------------/student
----------------app.vue
----------------cancel.vue
------------/teacher
----------------app.vue
----------------apply.vue
----/view
--------/student
------------app.blade.php
------------cancel.blade.php
--------/teacher
------------app.blade.php
------------apply.blade.php

我尝试了以下vite.config.js配置：

export default defineConfig({
    plugins: [
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false
                }
            }
        }),
        laravel({
            input: [
                ...glob.sync('resources/js/container/**/*.js')
            ],
            refresh: true
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm.js',
        }
    }
})

但执行npm run build后，生成的文件全部位于public/build/assets/目录下，请问如何编写vite.config.js以实现多入口构建并保留原目录结构？

要实现多入口构建并保留原目录结构，需要调整入口文件的映射方式，并配置Vite的输出规则，具体修改如下：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue2';
import glob from 'glob';

// 生成键值对形式的入口配置：键为相对路径（用于输出目录结构），值为文件路径
const entries = glob.sync('resources/js/container/**/*.js').reduce((acc, filePath) => {
    // 提取相对路径：移除前缀'resources/js/container/'和后缀'.js'
    const entryKey = filePath.replace('resources/js/container/', '').replace('.js', '');
    acc[entryKey] = filePath;
    return acc;
}, {});

export default defineConfig({
    plugins: [
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false
                }
            }
        }),
        laravel({
            input: entries, // 使用键值对形式的入口
            refresh: true
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm.js',
        }
    },
    build: {
        output: {
            // 配置入口文件输出路径：保留原目录结构，文件名添加哈希
            entryFileNames: '[name].[hash].js',
            // 配置静态资源输出路径：可根据需求调整，这里统一放在assets目录
            assetFileNames: 'assets/[name].[hash][extname]',
            // 配置代码分割后的chunk文件路径
            chunkFileNames: 'assets/chunks/[name].[hash].js'
        }
    }
});

关键说明： #

1. 入口映射处理：通过glob.sync遍历所有入口文件，将每个文件转换为相对路径键: 文件路径值的对象，这样Vite会根据键名生成对应的目录结构。例如student/app.js会被映射为键student/app，打包后输出到public/build/student/app.xxx.js。
2. 输出规则配置：在build.output中：
   • entryFileNames指定入口文件的输出格式，[name]会替换为入口的键名（即相对路径），从而保留原目录结构。
   • assetFileNames和chunkFileNames可根据需求调整，这里将静态资源和chunk文件统一放在assets目录下，也可以改为跟随入口目录的规则（比如[dir]/assets/[name].[hash][extname]）。
3. Laravel Vite兼容：使用键值对形式的input配置，Laravel Vite插件会自动生成正确的manifest.json，在Blade模板中使用@vite('resources/js/container/student/app.js')仍能正确加载打包后的文件。

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