vite-plugin-mpa

1.2.0 verified Mon Apr 27 auth: no javascript

Vite plugin that provides out-of-the-box multi-page application (MPA) support for any framework (Vue, React, etc.). Version 1.2.0 automatically configures rollupOptions.input for all pages found via glob scanning, rewrites dev server URLs so you can open clean paths like /subpage/ instead of /src/pages/subpage/index.html, and auto-opens the first page on dev start. It also optionally reorganizes the build output folder structure (e.g., moving dist/src/pages/subpage/index.html to dist/subpage/index.html). Actively maintained, weekly releases, with TypeScript types included.

Common errors

error Cannot find module 'vite-plugin-mpa' ↓

cause Package not installed or ESM-only nature not handled.

fix

Install the package: yarn add vite-plugin-mpa -D / npm install vite-plugin-mpa --save-dev

error TypeError: mpa is not a function ↓

cause Using CommonJS require() which returns an object instead of the default export.

fix

Use ES module import: import mpa from 'vite-plugin-mpa'

error Error: No pages found. Check your scanDir, scanFile, and filename options. ↓

cause Glob pattern does not match any page files.

fix

Verify that pages exist at the configured scanDir with the correct entry file (e.g., main.js) and HTML (index.html).

Warnings

gotcha Plugin requires Vite >=2.0.0; older versions not supported. ↓

fix Upgrade Vite to 2.0.0 or later.

gotcha The plugin only rewrites the dev server URL; it does not generate HTML files. You must have an index.html in each page directory matching the 'filename' option. ↓

fix Ensure each page folder contains an HTML file (default: index.html).

deprecated The 'open' option was added in v1.1.0; in v1.0.0 the first page was always opened automatically. ↓

fix Upgrade to v1.1.0+ to customize the open URL.

gotcha Build output reorganization is experimental and may not work as expected; use shell scripts as a more reliable alternative. ↓

fix Consider using a postbuild script with shelljs or a build tool.

Install

npm install vite-plugin-mpa

yarn add vite-plugin-mpa

pnpm add vite-plugin-mpa

Imports

mpa

wrong

const mpa = require('vite-plugin-mpa')

correct

import mpa from 'vite-plugin-mpa'

ESM-only package; CommonJS require will fail.

mpa (with options)

wrong

mpa({ pages: ['page1', 'page2'] })

correct

mpa({ scanDir: 'src/views', scanFile: 'index.{js,ts,jsx,tsx}', filename: 'template.html' })

Options are scanDir, scanFile, filename, open — not an explicit pages list.

MpaOptions
```
import type { MpaOptions } from 'vite-plugin-mpa'
```
Available for TypeScript users; not required for JavaScript.

Quickstart

Basic setup with custom scan directory, entry file pattern, HTML filename, and URL to open on dev start.

// vite.config.ts
import { defineConfig } from 'vite'
import mpa from 'vite-plugin-mpa'

export default defineConfig({
  plugins: [mpa({
    scanDir: 'src/pages',
    scanFile: 'main.{js,ts}',
    filename: 'index.html',
    open: '/page1/'
  })]
})