Laravel-Vite如何将SCSS与JS编译至独立的public资源子目录？

在使用Laravel Mix时，我们可以轻松将JS和SCSS文件分别编译到public/js和public/css目录：

// webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/header.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/main.scss', 'public/css')
    .sass('resources/sass/header.scss', 'public/css')

随后在Blade视图中通过asset函数直接引入资源：

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
<link rel="stylesheet" href="{{ asset('css/header.css') }}">

<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/header.js') }}"></script>

但切换到Laravel Vite后，默认编译产物会全部放到public/build/assets/目录，无法按类型拆分。针对这个问题，你可以通过以下配置实现分目录输出：

1. 修改vite.config.js配置 #

通过自定义Rollup输出规则和Laravel Vite插件的入口定义，指定不同类型文件的输出路径：

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

export default defineConfig({
    plugins: [
        laravel({
            // 以键值对形式定义入口，键名对应输出路径和文件名
            input: {
                'js/app': 'resources/js/app.js',
                'js/header': 'resources/js/header.js',
                'css/app': 'resources/sass/app.scss',
                'css/main': 'resources/sass/main.scss',
                'css/header': 'resources/sass/header.scss',
            },
            refresh: true,
        }),
    ],
    build: {
        // 指定输出根目录为public，替代默认的public/build
        outDir: 'public',
        // 避免清空public目录下的非编译文件（如图片、字体）
        emptyOutDir: false,
        rollupOptions: {
            output: {
                // 按照入口键名定义输出文件名，保留目录结构
                entryFileNames: '[name].js',
                chunkFileNames: '[name].js',
                assetFileNames: '[name].[ext]',
            },
        },
    },
});

2. 保持Blade视图的资源引入方式 #

配置完成后，编译产物会直接输出到public/js和public/css目录，因此可以继续使用原来的asset函数引入资源，无需修改：

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
<link rel="stylesheet" href="{{ asset('css/header.css') }}">

<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/header.js') }}"></script>

3. 额外说明 #

• 执行npm run dev时，Vite会通过HMR提供开发服务，资源路径会自动处理，无需手动调整
• 执行npm run build时，产物会直接生成到public/js和public/css目录，不会再产生build文件夹
• emptyOutDir: false是关键配置，防止Vite清空public目录下的其他静态资源

内容的提问来源于stack exchange，提问作者Lourd Nathaniel Gonzalez