Changing the input and output directory in 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 'dev' command 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 you need to specify each entry point. Details here. For 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")),
    },
  },
};