Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/IndexXuan/vite-plugin-mpa
MPA(multi page application) for vite.
https://github.com/IndexXuan/vite-plugin-mpa
vite vite-plugin
Last synced: 2 months ago
JSON representation
MPA(multi page application) for vite.
- Host: GitHub
- URL: https://github.com/IndexXuan/vite-plugin-mpa
- Owner: IndexXuan
- Created: 2021-02-18T08:17:21.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-16T13:04:51.000Z (over 1 year ago)
- Last Synced: 2024-09-18T20:51:41.739Z (3 months ago)
- Topics: vite, vite-plugin
- Language: TypeScript
- Homepage:
- Size: 167 KB
- Stars: 226
- Watchers: 2
- Forks: 35
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vite-plugin-mpa
> Out-of-the-box multi-page-application (MPA) support for Vite - supports Vue2/3, React and others
## Motivation
- Vite [natively supports multi-page apps](https://vitejs.dev/guide/build.html#multi-page-app), 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
```sh
yarn add vite-plugin-mpa
``````ts
// vite.config.ts
import mpa from 'vite-plugin-mpa'// @see https://vitejs.dev/config/
export default defineConfig({
plugins: [
// ...other plugins
mpa(/* options */),
],
})
```## Options
```ts
{
/**
* 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
}
```- [see more](https://github.com/IndexXuan/vite-plugin-mpa/blob/main/src/lib/options.ts)
## Examples
- see [src/examples](https://github.com/IndexXuan/vite-plugin-mpa/blob/main/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
- [vue-cli-plugin-vite](https://github.com/IndexXuan/vue-cli-plugin-vite)
- [vite-plugin-html-template](https://github.com/IndexXuan/vite-plugin-html-template)