vite-plugin-mp

Configure multi-pages applications and code splitting for Vite.

Usage

npm install vite-plugin-mp -D

// vite.config.js
import { defineConfig } from 'vite'
import { ViteMpPlugin } from 'vite-plugin-mp'

export default defineConfig({
  plugins: [ViteMpPlugin()],
})

How it works

The plugin automatically:

• Sets root to src/
• Discovers all *.html files under src/ as Rollup entry points
• Configures @ and src path aliases pointing to src/
• Sets publicDir to <project>/public
• Sets outDir to <project>/dist with emptyOutDir: true

Add jsconfig.json or tsconfig.json to enable path alias intellisense:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "src/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

Directory structure

├── public/
├── src/
│   ├── index.html
│   ├── react/
│   │   ├── index.html
│   │   ├── main.jsx
│   │   ├── App.jsx
│   │   └── ...
│   └── vue/
│       ├── index.html
│       ├── main.js
│       ├── App.vue
│       └── ...
├── jsconfig.json
├── vite.config.js
└── package.json

Output

After vite build:

dist/
├── index.html
├── react/
│   └── index.html
├── vue/
│   └── index.html
└── assets/
    ├── react-xxx.js
    ├── react-xxx.css
    ├── vue-xxx.js
    └── vue-xxx.css

Example

See example and https://zhuweiyou.github.io/vite-plugin-mp/.