Change the output path for certain files during build - ViteJS

Question

I'm making a static multipage website with ViteJS (html, scss and JS) and I can't find the way to change the build path of html files to put them into the root of dist folder.

My project structure is:

├── dist
    └──...
    └──src
       └── pages
             └── some-page.html
    └──...
├── node_modules
├── src
    └── pages
        └── some-page.html
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
└── vite.config.js

and I want:

├── dist
    └── ...
    └── some-page.html
    └── ...
├── node_modules
├── src
    └── pages
        └── some-page.html
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
└── vite.config.js

my vite.config.js (as the documentation recommends) is:

const { resolve } = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
    build: {
        rollupOptions: {
            input: {
                main: resolve(__dirname, 'index.html'),
                multiminerales: resolve(__dirname, 'src/pages/some-page.html')
            }
        }
    }
})

So, I think I need to change the input object but I can't find any information about it, I know about public directory but it will break all my folders structure. What can I do?

Answer 1

Yeah, I faced such problem, too.
For me it works to move index.html to src/pages,
then in vite.config.js specify root: './src/pages'.

So, your config may look like:

const { resolve } = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
    root: './src/pages',
    build: {
        rollupOptions: {
            input: {
                main: resolve(__dirname, 'src/pages/index.html'),
                multiminerales: resolve(__dirname, 'src/pages/some-page.html')
            }
        }
    }
})