如何在Vite/Rollup中修改资源构建路径保留原有目录结构？

为什么修改assetFileNames不生效 #

assetFileNames仅控制图片、字体、提取出的CSS等非JS静态资源的输出路径。JS产物分为入口脚本、共享分包两类，分别由entryFileNames、chunkFileNames两个独立配置项控制输出规则，和assetFileNames同属Rollup output的平级配置，改静态资源规则自然不会影响JS输出路径。

另外要保留原始目录结构，不能使用Vite默认的单页入口配置，必须先明确声明所有HTML入口，Rollup才能识别原始文件的层级关系。

完整可落地配置 #

// vite.config.js
import { defineConfig } from 'vite'
import path from 'node:path'

export default defineConfig({
  build: {
    outDir: 'dist',
    rollupOptions: {
      // 多页入口配置：key直接写「期望输出的相对路径/入口名」，会直接作为[name]变量供后续命名规则使用
      input: {
        'parent/parent': path.resolve(__dirname, 'parent/parent.html'),
        'parent/child/child': path.resolve(__dirname, 'parent/child/child.html')
      },
      output: {
        // 入口JS直接复用入口配置的路径，不需要额外拼接
        entryFileNames: '[name].js',
        // 共享分包/动态导入的JS统一放shared目录，避免和业务文件路径冲突
        chunkFileNames: 'shared/[name]-[hash].js',
        // 静态资源统一放根目录assets，如需跟随页面路径可改为对应动态规则
        assetFileNames: 'assets/[name]-[hash][extname]'
      }
    }
  }
})

特殊场景适配 #

如果项目存在大量动态导入的业务JS，需要动态保留原始目录层级，可以把chunkFileNames改为函数形式做路径解析：

chunkFileNames: (chunk) => {
  // 第三方依赖统一输出到vendor目录
  if (chunk.facadeModuleId?.includes('node_modules')) {
    return 'vendor/[name]-[hash].js'
  }
  // 提取业务文件在parent目录下的相对路径，保留原有层级
  const relativePath = chunk.facadeModuleId.split('parent/')[1]
  return relativePath.replace(/\.js$/, '-[hash].js')
}

配置完成后执行构建，HTML文件会自动跟随入口配置的路径输出，最终dist目录结构完全匹配预期：

dist
|-parent
|--parent.html
|--parent.js
|--child
|---child.html
|---child.js
|-assets
|-shared
|-vendor

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