Discuss how to configuring multiple entry points for MPA (Multi-Page App)

Question

Accepted Answer

Configuring a Multi-Page Application (MPA) in Vite involves setting up multiple HTML entry points, each with its own JavaScript entry file. Unlike SPAs where a single HTML file serves the entire application, MPAs require separate HTML files for different routes or sections. Vite provides several approaches to achieve this: manual configuration through `rollupOptions.input`, convention-based plugins that auto-discover entries, and virtual HTML plugins that generate multiple pages from templates. The choice depends on project complexity, team preferences, and specific requirements like template engines or custom output paths. The most direct approach is manually defining entry points in your Vite configuration. This gives you complete control over which HTML files become entry points and how they're named. You specify the `input` object under `build.rollupOptions`, where each key becomes the entry name and the value is the path to an HTML file. Vite processes each HTML file as a separate entry point, generating corresponding output files in the build directory. This approach is straightforward and works well for smaller projects with a fixed number of pages [citation:7][citation:5]. ```javascript
// vite.config.js
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        // Each key becomes an entry name, value is HTML file path
        main: resolve(__dirname, 'index.html'),
        about: resolve(__dirname, 'about/index.html'),
        blog: resolve(__dirname, 'blog/index.html'),
        admin: resolve(__dirname, 'admin/index.html')
      }
    }
  },
  // Important for MPA: set appType to 'mpa' for proper dev server behavior
  appType: 'mpa'
});
```

This configuration generates separate HTML files in the `dist` directory: `main.html`, `about.html`, `blog.html`, and `admin.html` (or preserving the original folder structure depending on Rollup's output). The `appType: 'mpa'` setting ensures the development server handles HTML requests correctly [citation:8]. For larger projects with many pages, manually listing each entry becomes cumbersome. Several community plugins offer convention-based auto-discovery, scanning directories and automatically generating entries. `@zhoumutou/vite-plugin-mpa` discovers entry files like `main.ts` in a `pages` directory and injects them into corresponding HTML templates. It supports nested routes, colocated templates, and automatic script injection [citation:2]. Another option, `@fchc8/vite-plugin-multi-page`, provides more advanced features like build strategies, TypeScript configuration, and CLI tools for batch building [citation:1]. ```javascript
// vite.config.js
import { defineConfig } from 'vite';
import mpa from '@zhoumutou/vite-plugin-mpa';

export default defineConfig({
  plugins: [
    mpa({
      // Directory containing page entries (default: 'src/pages')
      pages: 'src/pages',
      // Entry file name(s) to search for
      entry: ['main.tsx', 'main.ts', 'main.jsx', 'main.js'],
      // Default HTML template (optional)
      template: 'src/index.html'
    })
  ]
});

// Project structure:
// src/
//   pages/
//     index/
//       main.tsx          # → / (index.html)
//       index.html        # optional colocated template
//     about/
//       main.tsx          # → /about.html
//     admin/dashboard/
//       main.tsx          # → /admin/dashboard.html
```

The plugin automatically creates entries for each discovered page, injects the appropriate script tags, and handles both development server routing and production builds [citation:2]. When you need template engine support (like EJS) or want to generate multiple pages from a single template, virtual HTML plugins offer the most flexibility. `vite-plugin-virtual-mpa` allows you to define pages programmatically with custom output paths, data injection, and template engines. It generates virtual HTML files during build without requiring physical HTML files in your source [citation:6]. This is particularly useful for sites with many similar pages (like documentation or product listings) where maintaining individual HTML files would be repetitive [citation:4]. ```javascript
// vite.config.js
import { defineConfig } from 'vite';
import { createMpaPlugin } from 'vite-plugin-virtual-mpa';

export default defineConfig({
  plugins: [
    createMpaPlugin({
      // Define pages programmatically
      pages: [
        {
          name: 'home',
          filename: 'index.html',            // Output path
          entry: '/src/home/index.js',        // JS entry
          data: { title: 'Home Page' }        // Template data
        },
        {
          name: 'about',
          filename: 'about.html',
          entry: '/src/about/index.js',
          data: { title: 'About Us' }
        },
        {
          name: 'product',
          filename: 'products/[name].html',   // Dynamic output path
          entry: '/src/product/inde

Discuss how to configuring multiple entry points for MPA (Multi-Page App)

Configure multiple entry points for a Vite MPA by manually defining entry points in rollupOptions.input, using convention-based plugins for auto-discovery, or leveraging virtual HTML plugins with template engines for flexible output

Discuss how to configuring multiple entry points for MPA (Multi-Page App)

Configure multiple entry points for a Vite MPA by manually defining entry points in rollupOptions.input, using convention-based plugins for auto-discovery, or leveraging virtual HTML plugins with template engines for flexible output

Scenario Questions

Follow-up Questions