如何修改Vite配置，实现打包产物按原src目录结构导出？

问题原因&修正方案 #

你的配置遗漏了资源路径分类规则、多余入口配置、默认分块规则几个核心项，以下是完整可运行的配置：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    emptyOutDir: true,
    outDir: '../../testproject/assets/test/',
    // 关闭默认的小体积资源内联，避免SVG/字体被额外生成文件
    assetsInlineLimit: 0,
    rollupOptions: {
      output: {
        // 入口JS固定输出到js目录
        entryFileNames: 'js/[name].js',
        // 按资源类型分类指定输出路径
        assetFileNames: (assetInfo) => {
          // CSS文件输出到css目录
          if (assetInfo.name.endsWith('.css')) {
            return 'css/[name][extname]';
          }
          // 字体文件输出到fonts目录
          if (/\.(woff2?|eot|ttf|otf)$/i.test(assetInfo.name)) {
            return 'fonts/[name][extname]';
          }
          // 图片类资源（含SVG）输出到images目录
          if (/\.(png|jpe?g|gif|svg|webp)$/i.test(assetInfo.name)) {
            return 'images/[name][extname]';
          }
          // 其他资源统一输出到assets目录，可按需调整
          return 'assets/[name][extname]';
        },
        // 关闭自动公共chunk拆分，避免生成多余的映射JS文件
        manualChunks: undefined
      },
      // 仅保留JS作为唯一入口，SCSS在JS文件内引入即可
      input: './src/js/app.js'
    }
  },
  // 如果需要原封不动复制src/static下的所有文件到输出根目录，开启以下配置
  // publicDir: 'src/static'
})

对应问题修复说明 #

• 多余assets映射文件：原配置将SCSS作为独立入口，同时Vite默认开启公共chunk拆分，删除SCSS入口+关闭自动分块即可解决，注意需在src/js/app.js第一行添加import '../styles/app.scss'引入样式文件。
• 字体文件重复输出：原配置未给字体指定输出路径，默认直接输出到根目录，新增字体路径规则后可统一输出到fonts目录，同时注意不要将字体文件放在public目录，避免被public的全局复制逻辑额外复制一份。
• 部分SVG输出到根目录：原配置未给SVG指定输出路径，且小于4kb的SVG默认会被Vite转成base64，关闭内联+新增图片路径规则后可统一输出到images目录。
• JS/CSS未按预期路径存放：新增的entryFileNames和CSS路径规则已经固定输出路径为js/app.js和css/app.css，符合需求。

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