如何通过Vite配置实现仅保留src一级子目录的dist输出结构？

可以完全通过Vite配置文件实现需求，无需手动维护大量rollup-plugin-copy映射，具体配置分三部分处理：

1. 处理代码中导入的Assets资源（自动扁平化） #

针对代码里通过import引入的图片、字体等资源，修改Vite的build.rollupOptions.output配置，强制将所有assets类资源输出到assets根目录：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'out',
    rollupOptions: {
      output: {
        // 所有静态资源直接输出到assets根目录，保留原文件名+哈希后缀
        assetFileNames: 'assets/[name].[hash][extname]',
        // 代码chunk输出路径可按需调整，不影响一级目录结构
        chunkFileNames: 'js/[name].[hash].js',
        entryFileNames: 'js/[name].[hash].js'
      }
    }
  }
});

此配置会让所有通过模块导入的assets资源，无论原路径是src/assets/images还是src/assets/fonts，都会被扁平化输出到out/assets目录。

2. 处理未被代码引用的静态Assets文件（动态扁平化复制） #

如果src/assets下存在未被代码引用的静态文件，可通过@rollup/plugin-copy动态扫描并复制，避免手动配置：

先安装插件：

npm install @rollup/plugin-copy --save-dev

再添加动态扫描逻辑到Vite配置：

// vite.config.js
import { defineConfig } from 'vite';
import copy from '@rollup/plugin-copy';
import fs from 'fs/promises';
import path from 'path';

// 递归扫描src/assets下所有文件，生成扁平化复制规则
async function getAssetsCopyRules() {
  const assetsDir = path.resolve(__dirname, 'src/assets');
  const rules = [];

  async function scan(dir) {
    const entries = await fs.readdir(dir, { withFileTypes: true });
    for (const entry of entries) {
      const fullPath = path.join(dir, entry.name);
      if (entry.isDirectory()) {
        await scan(fullPath);
      } else {
        rules.push({
          src: fullPath,
          dest: path.resolve(__dirname, 'out/assets'),
          rename: path.basename(fullPath)
        });
      }
    }
  }

  await scan(assetsDir);
  return rules;
}

export default defineConfig(async () => ({
  build: {
    outDir: 'out',
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name].[hash][extname]'
      },
      plugins: [
        copy({
          targets: await getAssetsCopyRules(),
          hook: 'writeBundle',
          overwrite: true
        })
      ]
    }
  }
}));

3. 保持Config目录结构不变 #

对于src/config目录，无需额外修改基础配置——Vite会默认根据代码导入关系保持打包后的目录结构。若存在未被代码引用的静态文件，可在copy插件中添加规则保留原结构：

// 在copy插件的targets中合并以下规则
const configCopyRules = {
  src: path.resolve(__dirname, 'src/config/**/*'),
  dest: path.resolve(__dirname, 'out/config'),
  flatten: false // 禁止扁平化，保留原目录结构
};

// 修改plugins中的copy配置
plugins: [
  copy({
    targets: [...(await getAssetsCopyRules()), configCopyRules],
    hook: 'writeBundle',
    overwrite: true
  })
]

最终效果 #

• src/assets下所有文件（无论是否被代码引用）都会扁平化输出到out/assets
• src/config下所有文件（代码或静态资源）保持原目录结构输出到out/config
• 新增src/assets子文件夹时无需手动更新配置，会自动扫描处理

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