1.0.10 • Published 2 years ago
vite-plugin-mpa-next v1.0.10
vite-plugin-mpa-next
Out-of-the-box multi-page-application (MPA) support for Vite - supports Vue2/3, React and others
Motivation
- Vite natively supports multi-page apps, but you must configure
rollupOptions.input
manually - When running vite dev, you must open
localhost:3000/src/pages/index/xxx.html
for$projectRoot/src/pages/index/xxx.html
- Similar to vue-cli, this plugin helps rewrite urls for MPA and auto open the first page for you
- Experimental: when building, organize the folder for you (like vue-cli) - e.g
dist/src/pages/subpage/index.html
will move todist/subpage/index.html
Usage
yarn add vite-plugin-mpa-next
// vite.config.ts
import mpa from 'vite-plugin-mpa-next'
// @see https://vitejs.dev/config/
export default defineConfig({
plugins: [
// ...other plugins
mpa(/* options */),
],
})
Options
{
/**
* open url path when server starts (customizable)
* @default path of first-page
*/
open: string
/**
* where to locate pages
* @default 'src/pages', e.g. src/views
*/
scanDir: string
/**
* how to locate page files (passed to fast-glob), e.g. index.{js,jsx}
* @default 'main.{js,ts,jsx,tsx}'
*/
scanFile: string
/**
* what is your html file name, e.g. index.html / main.html / entry.html / template.html
* @default 'index.html'
*/
filename: string
/**
* what is your del index.html, e.g. /subpage/index.html => subpage.html
* @default false
*/
delIndex: boolean
}
Examples
see src/examples
use shelljs after-build to organize dist folder (may be a better approach - help wanted)
How It Works
- Uses fast-glob to collect all pages, e.g. src/pages/*/main.{js,ts}, and calc MPA entries
- The result is passed into vite#rollupOptions#input