Laravel Vite配置：实现CSS与图片资源目录分离

先修正你当前配置里的语法错误：input数组中'resources/css/app.css,'多了个逗号，会导致配置解析失败，改成'resources/css/app.css',即可。

要实现构建后分离图片和CSS资源，需要通过Vite的build.output配置项，针对不同类型资源指定输出路径，修改后的完整配置如下：

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

export default defineConfig({
    build: {
        output: {
            // 配置图片、字体等静态资源的输出路径
            assetFileNames: (assetInfo) => {
                const extType = assetInfo.name.split('.').pop();
                // 匹配图片类扩展名，定向到images目录
                if (/png|jpe?g|gif|svg|webp/i.test(extType)) {
                    return 'assets/images/[name].[hash][extname]';
                }
                // 其他静态资源（如字体）可按需调整路径
                return 'assets/[name].[hash][extname]';
            },
            // 配置CSS文件的输出路径
            cssFileNames: 'assets/css/[name].[hash].css',
            // 指定JS文件的输出路径（保持默认的assets/js目录）
            chunkFileNames: 'assets/js/[name].[hash].js',
            entryFileNames: 'assets/js/[name].[hash].js',
        }
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/scss/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

配置说明 #

• assetFileNames：通过判断资源扩展名，把图片类资源定向到assets/images目录，其他静态资源可按需扩展规则调整路径。
• cssFileNames：强制所有提取的CSS文件输出到assets/css目录。
• chunkFileNames和entryFileNames：指定JS文件的输出路径，这里保持默认的assets/js目录，需要调整时直接修改即可。

执行npm run build构建后，public/assets目录下会生成images和css子目录，分别存放对应类型的资源文件。

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