@sundaysky/vite-plugin-mpa v1.0.1

Vite-plugin-mpa

English | 中文

Description

This plugin provides true MPA functionality for Vite, eliminating various limitations of Vite MP.

No matter where your entry files/template files are located, you can access pages through the root route, making it perfect for embedded page development.

http://localhost:5173/index.html
http://localhost:5173/about.html
...

🙅🏻‍♀️: No need to search everywhere for your MPA page addresses.

Try the demo.

Features

• True MPA.
• Load pages on demand - no matter how many pages you have, only the current page will be loaded.
• Support for reusing template files.
• Support for 404 pages.
• Support for vue, react...and all frameworks supported by Vite.

Quick Start

Installation

# Using pnpm
pnpm add @sundaysky/vite-plugin-mpa

# Or bun
bun add @sundaysky/vite-plugin-mpa

# Or npm
npm install @sundaysky/vite-plugin-mpa

# Or yarn
yarn add @sundaysky/vite-plugin-mpa

Configuration

import { defineConfig } from 'vite';
import type { PluginOption } from 'vite';
import vitePluginMPA from '@sundaysky/vite-plugin-mpa';

// https://vite.dev/config/
export default defineConfig({
  // ...
  plugins: [
    // ...
    vitePluginMPA({
      // Configure your pages
      pages: {
        index: {
          title: 'index',
          entry: 'src/pages/index/main.ts',
          template: 'template/index.html',
        },
        index2: {
          title: 'index2',
          entry: 'src/pages/index2/main.ts',
          template: 'template/index2.html',
        },
      },
    }) as PluginOption,
  ],
});

Usage

Start vite serve, visit http://localhost:5173/index.html, and you'll see the page.

Configuration Options

import type { Options } from '@sundaysky/vite-plugin-mpa';

You can see all configuration option type definitions.

options.pages

• Required: Yes
• Type: Record<string, PageInfo>
• Description: Page configuration, where key is the page name and value is the page configuration.
• Type definition:

interface PageInfo {
  title: string;
  entry: string;
  template: string;
}

type Pages = Record<string, PageInfo>;

• Example:

pages: {
  index: {
    title: 'index',
    entry: 'src/pages/index/main.ts',
    template: 'template/index.html',
  },
  index2: {
    title: 'index2',
    entry: 'src/pages/index2/main.ts',
    template: 'template/index2.html',
  },
}

options.generateNotFoundHtml

Only effective in development environment

• Required: No
• Type: (rawPages: string) => string
• Description: Generate a 404 page. When a user visits a non-existent page, this function will be called to generate a 404 page.
• Example:

generateNotFoundHtml: (rawPages: string) => {
  return `<div>
  <h1>Page not found, you can go to:</h1>
  <ul>${rawPages}</ul>
  </div>`;
}