项目作者: IndexXuan

项目描述 :
MPA(multi page application) for vite.
高级语言: TypeScript
项目地址: git://github.com/IndexXuan/vite-plugin-mpa.git
创建时间: 2021-02-18T08:17:21Z
项目社区:https://github.com/IndexXuan/vite-plugin-mpa

开源协议:

下载


vite-plugin-mpa

Out-of-the-box multi-page-application (MPA) support for Vite - supports Vue2/3, React and others


wakatime

NPM Publish


downloads


npm version


License: MIT

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 to dist/subpage/index.html

Usage

  1. yarn add vite-plugin-mpa
  1. // vite.config.ts
  2. import mpa from 'vite-plugin-mpa'
  3. // @see https://vitejs.dev/config/
  4. export default defineConfig({
  5. plugins: [
  6. // ...other plugins
  7. mpa(/* options */),
  8. ],
  9. })

Options

  1. {
  2. /**
  3. * open url path when server starts (customizable)
  4. * @default path of first-page
  5. */
  6. open: string
  7. /**
  8. * where to locate pages
  9. * @default 'src/pages', e.g. src/views
  10. */
  11. scanDir: string
  12. /**
  13. * how to locate page files (passed to fast-glob), e.g. index.{js,jsx}
  14. * @default 'main.{js,ts,jsx,tsx}'
  15. */
  16. scanFile: string
  17. /**
  18. * what is your html file name, e.g. index.html / main.html / entry.html / template.html
  19. * @default 'index.html'
  20. */
  21. filename: string
  22. }

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

Further Info