Vite构建输出资源无法按类型归类至子目录的问题求助

问题根源分析 #

你的配置存在三个核心问题：

• JS资源规则错误：assetFileNames仅控制非JS类资源（CSS、字体、图片等），JS文件和sourcemap分别由chunkFileNames、sourcemapFileNames负责，当前配置未覆盖这两项。
• 图片处理绕过Vite规则：手动调用imagemin直接将图片输出到dist/assets，完全跳过Vite的资源处理流程，自然不会应用assetFileNames的目录归类规则。
• 扩展名判断不够健壮：直接用ext匹配可能存在大小写问题（比如.JPG），且Rollup的ext字段有时会出现无点的情况，用type字段判断资源类型更可靠。

修正后的完整配置 #

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import autoprefixer from 'autoprefixer';
// 改用Vite专用的图片压缩插件，而非手动调用imagemin
import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
    server: {
        host: true,
        port: 8080,
        open: true,
        https: false,
        proxy: {
            '/api': {
                target: 'https://jsonplaceholder.typicode.com',
                changeOrigin: true,
                rewrite: path => path.replace(/^\/api/, ''),
            },
        },
    },
    css: {
        postcss: {
            plugins: [
                autoprefixer(),
            ],
        },
    },
    build: {
        assetsDir: 'assets',
        minify: 'terser',
        sourcemap: true,
        cssCodeSplit: true,
        rollupOptions: {
            output: {
                // 处理JS chunk文件
                chunkFileNames: 'assets/js/[name]-[hash].js',
                // 处理非JS类资源（CSS、字体、图片等）
                assetFileNames: assetInfo => {
                    const { type } = assetInfo;
                    if (type === 'css') {
                        return 'assets/css/[name]-[hash][extname]';
                    }
                    if (type === 'font') {
                        return 'assets/fonts/[name]-[hash][extname]';
                    }
                    if (type === 'image') {
                        return 'assets/img/[name]-[hash][extname]';
                    }
                    // 其他资源默认路径
                    return 'assets/[name]-[hash][extname]';
                },
                // 处理sourcemap文件
                sourcemapFileNames: 'assets/js/[name]-[hash].js.map'
            },
        },
        plugins: [
            vue(),
            // 配置Vite图片压缩插件
            viteImagemin({
                webp: {
                    quality: 75,
                },
            }),
        ],
    },
});

关键调整说明 #

1. 替换图片压缩方式：移除手动imagemin调用，改用vite-plugin-imagemin插件，让图片经过Vite的资源处理链路，确保assetFileNames规则生效。
2. 拆分资源配置项：分别配置chunkFileNames（JS文件）、assetFileNames（非JS资源）、sourcemapFileNames（sourcemap文件），覆盖所有资源类型的目录规则。
3. 优化资源判断逻辑：用Rollup提供的type字段判断资源类型（css/font/image），比直接匹配扩展名更稳定，避免大小写或扩展名格式问题。
4. 保留哈希值：配置中保留了[hash]占位符，这是生产环境缓存优化的最佳实践，如果你不需要哈希，可以替换为[name][extname]。

验证步骤 #

1. 安装新增依赖：npm install vite-plugin-imagemin --save-dev
2. 清理旧构建产物：rm -rf dist（Windows系统用rmdir /s dist）
3. 重新构建：npm run build
4. 查看dist/assets目录，资源会按预期归类到css、fonts、img、js子目录中。

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