vite-plugin-multi-pages

0.0.14 verified Fri May 01 auth: no javascript

A Vite plugin for building multi-page applications (MPA) supporting Vue 2/3, React, and other frameworks. Version 0.0.14 (latest) with active development. Scans a directory (default src/views) for entry files and generates HTML pages for each. Differentiators: simple zero-config setup, supports custom scan options, rewrite rules, and page filtering. Integrates with companion plugins for HTML templates and vconsole. Requires Vite >=2.0.0 and TypeScript >=4.0.0.

Common errors

error Cannot find module 'vite-plugin-multi-pages' ↓

cause Package not installed or incorrect import path.

fix

Run npm install vite-plugin-multi-pages and verify the import path matches 'vite-plugin-multi-pages'.

error TypeError: mpa is not a function ↓

cause Using CommonJS require() instead of ESM import.

fix

Use import mpa from 'vite-plugin-multi-pages' and ensure your project uses ESM (type: module in package.json or .mjs config).

error Error: No entry files found in /path/to/src/views ↓

cause The scanDir option points to a directory without matching scanFile (default 'main.{js,ts,jsx,tsx}').

fix

Check that your entry files exist and match the scanFile pattern; adjust scanDir or scanFile accordingly.

Warnings

gotcha Plugin requires Vite >=2.0.0 and TypeScript >=4.0.0; older versions will cause build failures. ↓

fix Ensure Vite and TypeScript meet minimum version requirements.

gotcha scanFile default is 'main.{js,ts,jsx,tsx}'; if your entry files have different names, you must specify scanFile explicitly. ↓

fix Set scanFile option to match your entry file pattern, e.g., 'index.{js,ts}'.

gotcha For React projects, ensure JSX/TSX files are processed by the appropriate Vite React plugin; otherwise, the plugin may not detect entry files correctly. ↓

fix Include @vitejs/plugin-react or similar in vite.config.ts before mpa() plugin.

Install

npm install vite-plugin-multi-pages

yarn add vite-plugin-multi-pages

pnpm add vite-plugin-multi-pages

Imports

mpa

wrong

const mpa = require('vite-plugin-multi-pages')

correct

import mpa from 'vite-plugin-multi-pages'

Default import; plugin is ESM-only, CommonJS require will fail.

MpaOptions

wrong

import { MpaOptions } from 'vite-plugin-multi-pages'

correct

import type { MpaOptions } from 'vite-plugin-multi-pages'

Type import, not a value. Use 'import type' to avoid runtime errors.

Rewrite

import type { Rewrite } from 'vite-plugin-multi-pages'

Type export for rewrite rules.

Quickstart

Shows basic configuration of vite-plugin-multi-pages with custom scan directory and default open page.

// vite.config.ts
import { defineConfig } from 'vite';
import mpa from 'vite-plugin-multi-pages';

export default defineConfig({
  plugins: [
    mpa({
      scanDir: 'src/views',
      scanFile: 'main.{js,ts,jsx,tsx}',
      filename: 'index.html',
      defaultOpenPage: true,
    }),
  ],
});