# vite-plugin-mpa-next

> MPA for vite

Latest version **1.0.10** (published 2022-11-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-mpa-next
pnpm add vite-plugin-mpa-next
yarn add vite-plugin-mpa-next
bun add vite-plugin-mpa-next
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2022-11-08 |
| First published | 2022-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 343.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | lzq0email@gmail.com |
| Maintainers | lzq035 |
| Keywords | vite-plugin, mpa, MPA, multi-page |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-mpa-next
- Repository: https://github.com/lzq035/vite-plugin-mpa-next
- Issues: https://github.com/lzq035/vite-plugin-mpa-next/issues
- npm.io page: https://npm.io/package/vite-plugin-mpa-next

## Dependencies (3)

- [yargs](https://npm.io/package/yargs.md) 16.2.0
- [shelljs](https://npm.io/package/shelljs.md) 0.8.5
- [connect-history-api-fallback](https://npm.io/package/connect-history-api-fallback.md) 1.6.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.10 (latest) — 2022-11-08
- 1.0.8 — 2022-11-08
- 1.0.7 — 2022-11-08
- 1.0.6 — 2022-11-08
- 1.0.5 — 2022-11-08
- 1.0.4 — 2022-11-08
- 1.0.1 — 2022-11-08
- 1.0.0 — 2022-11-08

## README

# vite-plugin-mpa-next

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

<p align="center">
  <a href="https://github.com/lzq035/vite-plugin-mpa-next/actions/workflows/npm-publish.yml">
   <img alt="NPM Publish" src="https://github.com/lzq035/vite-plugin-mpa-next/actions/workflows/npm-publish.yml/badge.svg" style="max-width:100%;">
  </a>
  <a href="https://www.npmjs.com/package/vite-plugin-mpa-next" rel="nofollow">
    <img alt="downloads" src="https://img.shields.io/npm/dt/vite-plugin-mpa-next.svg">
  </a>
  <a href="https://www.npmjs.com/package/vite-plugin-mpa-next" rel="nofollow">
    <img alt="npm version" src="https://img.shields.io/npm/v/vite-plugin-mpa-next.svg" style="max-width:100%;">
  </a>
  <a href="https://github.com/lzq035/vite-plugin-mpa-next/blob/main/LICENSE">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" style="max-width:100%;">
  </a>
</p>

## 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-next
```

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

// @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
   /**
   * what is your del index.html, e.g. /subpage/index.html => subpage.html
   * @default false
   */
  delIndex: boolean
}
```

- [see more](https://github.com/lzq035/vite-plugin-mpa-next/blob/main/src/lib/options.ts)

## Examples

- see [src/examples](https://github.com/lzq035/vite-plugin-mpa-next/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

---
_Source: https://npm.io/package/vite-plugin-mpa-next · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._