如何在Vite中构建多页面应用并将各页面输出至独立目录？

你想要的每个页面输出到独立目录是可以实现的，但不能直接把rollupOptions设为数组——Vite的build.rollupOptions只接受单个Rollup配置对象，而非数组。通过配置Rollup的输入输出规则，就能实现页面资源的目录隔离，适配后端路由对应独立静态页面的场景。

正确配置示例 #

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  build: {
    rollupOptions: {
      // 配置多页面入口，key为页面标识，value为对应HTML入口路径
      input: {
        page1: path.resolve(__dirname, 'src/page1.html'),
        page2: path.resolve(__dirname, 'src/page2.html')
      },
      output: {
        // 入口JS文件输出到对应页面目录
        entryFileNames: '[name]/[name].js',
        // 拆分的chunk文件（如公共依赖）可按页面或公共目录存放
        // 若想公共资源单独放，可改为 'common/[name]-[hash].js'
        chunkFileNames: '[name]/[name]-[hash].js',
        // 静态资源（CSS、图片、字体等）输出到对应页面目录
        assetFileNames: '[name]/[name]-[hash][extname]'
      }
    }
  }
})

配置说明 #

• 构建后，page1的所有资源（入口JS、编译后的CSS、静态资源）会统一输出到dist/page1/目录，page2对应dist/page2/，完全满足页面资源隔离的需求。
• 如果多个页面存在公共依赖（如Svelte核心库），可以调整chunkFileNames规则，将公共chunk放到dist/common/目录下，避免重复打包。

相关背景 #

你提到的GitHub议题中，社区用户集中反馈了多页面构建时资源集中存放的痛点，官方最终确认可以通过Rollup的输出命名规则实现目录隔离，无需额外开发插件，直接通过上述配置即可达成需求。

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