w2819/vite-plugin-mpa

vite-plugin-mpa

out-of-box multi-page-application for vite, support Vue2/3, React and others

Motivation

• vite native support multi-page, but you must configure rollupOptions.input
• when vite dev, you must open localhost:3000/src/pages/index/xxx.html for $projectRoot/src/pages/index/xxx.html
• vue-cli help rewrite url for MPA, this plugin do the same thing and auto open first page for you
• experiment: when build, organize the folder for you(like vue-cli), dist/src/pages/subpage/index.html will move to dist/subpage/index.html

Usage

yarn add vite-plugin-mpa

// vite.config.ts
import mpa from 'vite-plugin-mpa'

// @see https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...other plugins
    mpa(/* options */),
  ],
})

Options

{
  /**
   * open url path when server start, you can custom it
   * @default path of first-page
   */
  open: string
  /**
   * where to locate pages
   * @default 'src/pages', e.g. src/views
   */
  scanDir: string
  /**
   * where to locate pages, pass 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
}

• see more

Examples

• see src/examples

• use shelljs after-build to organize dist folder, maybe have better approach (help wanted)

Underlying

• fast-glob for src/pages/*/main.{js,ts}, calc MPA entries
• the result will be setted to vite#rollupOptions#input

Further

• vue-cli-plugin-vite