Changing the input and output directory in Vite - vite

Question

I am using Vite (https://vitejs.dev/) for a static multipage site.
This is the default project folder structure after the build command.
my-app/
├─ node_modules/
├─ dist/
│ ├─ assets/
│ ├─ index.html
├─ index.html
├─ main.js
├─ style.scss
├─ package.json
But I want to make this a multipage site and change the input and output directory for a better organizable way like this
my-app/
├─ node_modules/
├─ package.json
├─ src/
│ ├─ about.html
│ ├─ index.html
│ ├─ main.js
│ ├─ style.scss
├─ dist/
│ ├─ assets/
│ ├─ about.html
│ ├─ index.html
Basically, it should take the src as an input folder and output dist as a child of the my-app. When I try to do this it shows errors, then I change the scripts of the package.json into this
"scripts": {
"dev": "vite src",
"build": "vite build src",
"serve": "vite preview"
},
This way the devcommand works fine. But the 'build' command makes the dist folder inside the src folder and does not generate other HTML files except index.html.
Now how can I fix this? Any suggestion?

Answer 1

Create a vite.config.js file and define your project root and output directory as such:
module.exports = {
root: 'src',
build: {
outDir: '../dist'
}
}
For more info, checkout config.

Answer 2

For multipage apps you need to specify each entry point.
To dynamically specify all .html files in src/ directory as the entry points you can set up your vite.config.js like this:
import path from "path";
import glob from "glob";
export default {
root: path.join(__dirname, "src"),
build: {
outDir: path.join(__dirname, "dist"),
rollupOptions: {
input: glob.sync(path.resolve(__dirname, "src", "*.html")),
},
},
};
Make sure to install glob like this
npm install glob -D

Answer 3

If you want to use defineConfig in your vite.config.ts you can use it like this:
import { defineConfig } from 'vite'
import reactRefresh from '#vitejs/plugin-react-refresh'
import eslintPlugin from 'vite-plugin-eslint'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh(), eslintPlugin({ cache: false })],
root: 'src',
build: {
outDir: '../dist'
}
})

Answer 4

Make sure you add vite.config.js inside your Vite root directory (src).
module.exports = defineConfig({
base: '',
root: 'src',
build: {
outDir: '../dist'
}
});
Don't forget to update your package scripts. You'll need to add the --emptyOutDir flag if you want the same behavior as in the default project structure (clear output folder before building).
"scripts": {
"dev": "vite src",
"build": "vite build src --emptyOutDir",
}

Answer 5

You can set up your vite.config.js like this:
import path from 'path'
export default {
root: path.resolve(__dirname, 'src'),
build: {
outDir: path.resolve(__dirname, 'dist'),
rollupOptions: {
input: {
index: path.resolve(__dirname, 'src/index.html'),
about: path.resolve(__dirname, 'src/about.html')
}
}
}
}