/vite-plugin-mpa-plus

More flexible MPA (multipage application) supports html template

Primary LanguageTypeScriptMIT LicenseMIT

vite-plugin-mpa-plus

Similar to the 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

pnpm install vite-plugin-mpa-plus

Usage

Add plugin to your vite.config.ts:

Multi-page application configuration

import { defineConfig } from 'vite'
import mpaPlugin from 'vite-plugin-mpa-plus'

export defineConfig({
    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

import { defineConfig } from 'vite'
import mpaPlugin from 'vite-plugin-mpa-plus'

export defineConfig({
    mpaPlugin({
        entry: 'src/main.ts',
        inject: {
            data: {
                title: 'spa'
            }
        }
    })
})

historyApiFallback configuration

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<Pages>((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

# 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