mpa-vite-plugin

A Vite plugin for multi-page static sites.

Vite's built-in MPA support has two problems:

• Dev server doesn't route /settings to src/pages/settings/index.html
• Build output paths ignore your entry keys and use the full source path instead

This plugin fixes both.

Website

emperor-of-mars.github.io/mpa-vite-plugin

Install

npm install mpa-vite-plugin

Local development install

If you're installing from a local path:

npm install file:/absolute/path/to/mpa-vite-plugin

Setup

Create your pages:

src/
└── pages/
    ├── index/
    │   ├── index.html
    │   └── index.ts
    └── settings/
        ├── index.html
        └── index.ts

Add the plugin to your vite.config.ts:

import { defineConfig } from 'vite'
import multivite from 'mpa-vite-plugin'

export default defineConfig({
  plugins: [multivite()]
})

Dev

vite --configLoader runner

you cann add this to your package.json

"scripts": {
  "dev": "vite --configLoader runner"
}

Visit http://localhost:5173/ and http://localhost:5173/settings.

Build

vite build

Output:

dist/
├── index.html
├── settings.html
└── assets/

Options

multivite({ pagesDir: 'src/pages' }) // default

How it works

Three Vite plugin hooks:

• config — discovers pages and injects them as Rollup entry points
• configureServer — rewrites URLs in dev so /settings serves the right HTML file
• generateBundle — remaps output paths from the deep source structure to a clean flat layout

package.json requirements

Your plugin's package.json must have the correct name, main, and types fields:

{
  "name": "mpa-vite-plugin",
  "type": "module",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts"
}

Building

After cloning, compile before use:

npm install
npm run build

This compiles src/index.ts to dist/. The dist/ folder is not committed to the repo.