Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yzydeveloper/vite-plugin-mpa-plus
More flexible MPA (multipage application) supports html template
https://github.com/yzydeveloper/vite-plugin-mpa-plus
Last synced: about 2 months ago
JSON representation
More flexible MPA (multipage application) supports html template
- Host: GitHub
- URL: https://github.com/yzydeveloper/vite-plugin-mpa-plus
- Owner: yzydeveloper
- License: mit
- Created: 2022-05-19T16:47:18.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-04-18T01:08:00.000Z (5 months ago)
- Last Synced: 2024-05-19T23:02:50.963Z (4 months ago)
- Language: TypeScript
- Size: 148 KB
- Stars: 80
- Watchers: 4
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - vite-plugin-mpa-plus - More flexible MPA (multi-page application) supports html templates, path rewriting. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-mpa-plus - More flexible MPA (multi-page application) supports html templates, path rewriting. (Plugins / Framework-agnostic Plugins)
README
# vite-plugin-mpa-plus
Similar to the [pages](https://cli.vuejs.org/en/config/#pages) option of vue-cli
## Features
- EJS template capability
- Multi-page/Single-page application support
- Support custom entry
- Support custom template
- Support `connect-history-api-fallback`
## Install
```bash
pnpm install vite-plugin-mpa-plus
```
## Usage
Add plugin to your vite.config.ts:
### Multi-page application configuration
```ts
import { defineConfig } from 'vite'
import mpaPlugin from 'vite-plugin-mpa-plus'
export defineConfig({
plugins: [
mpaPlugin({
pages: {
app1: {
entry: 'src/app/app1/index.ts',
filename: '/pages/app1.html',
template: 'src/app/app1/index.html',
inject: {
data: {
title: "mpa-app1"
}
}
},
app2: {
entry: 'src/app/app2/index.ts',
filename: '/pages/app2.html',
template: 'src/app/app2/index.html',
inject: {
data: {
title: "mpa-app2"
}
}
}
}
})
]
})
```
### Signal-page application configuration
```ts
import { defineConfig } from 'vite'
import mpaPlugin from 'vite-plugin-mpa-plus'
export defineConfig({
plugins: [
mpaPlugin({
entry: 'src/main.ts',
inject: {
data: {
title: 'spa'
}
}
})
]
})
```
### historyApiFallback configuration
```ts
import type { Rewrite, Pages } from 'vite-plugin-mpa-plus'
import { defineConfig } from 'vite'
import path from 'path'
import mpaPlugin from 'vite-plugin-mpa-plus'
const entrys = ['app1', 'app2']
const rewrites:Rewrite = []
const pages = entrys.reduce((result, pageName) => {
result[pageName] = {
entry: `src/app/${pageName}/index.ts`,
filename: `/pages/${pageName}.html`,
template: `src/app/${pageName}/index.html`,
inject: {
data: {
title: 'mpa'
}
}
}
rewrites.push({
from: `/view-${pageName}`,
to: `/pages/${pageName}.html`
})
return result
}, {})
export default defineConfig(() => {
return {
plugins: [
mpaPlugin({
pages,
historyApiFallback: {
rewrites
}
}),
],
}
})
```
## Development
```sh
# Install all dependencies
pnpm install
# Build or dev core package
pnpm --filter vite-plugin-mpa-plus build
pnpm --filter vite-plugin-mpa-plus dev
# Build playground example
pnpm --filter playground-mpa build
```