Multiple Inputs with Vite

Question

I'm having multiple inputs when building my app with vite. My config looks like this:

export default defineConfig({
  plugins: [
    react(),
    eslintPlugin()
  ],
  build: {
    rollupOptions: {
      input: {
        test1: resolve(__dirname, '/test1.html'),
        test2: resolve(__dirname, '/test2.html')
      }
    }
  }
});

The output looks like this:

dist
|-test1.html
|-test2.html
|-assets

What I actually want is something like this:

dist
|test1
  |-index.html
|test2
  |-index.html
|-assets

Is this possible?

Thanks

Answer 1

You can use property names to define dest dirs (see docs)

...
: rollupOptions: {
    input: {
        'test1/index': resolve(__dirname, '/test1.html'),
        'test2/index': resolve(__dirname, '/test2.html')
    }
}
       

Answer 2

The build output normally matches the directory structure of the input file, so in your case, you could move those files into the respective directories under the project root directory:

my-project/
 |- test1/
 | `- index.html
 `- test2/
   `- index.html

Then configure Vite's build.rollupOptions.input to point to those files:

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

export default defineConfig({
  ⋮
  build: {
    rollupOptions: {
      input: {
        test1: resolve(__dirname, './test1/index.html'),
        test2: resolve(__dirname, './test2/index.html'),
      },
    },
  },
})

demo