Question Loading...

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

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].

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].

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].

A common challenge with MPAs is using client-side routers (like Vue Router or React Router) within individual pages. When using history mode, refreshing a nested route like /mgmt/room/details can result in a 404 because the server doesn't recognize the path. The solution involves configuring the development server and production server to fall back to the correct HTML entry point. In development, you can use Vite's proxy configuration to rewrite paths to appropriate HTML files. In production, configure your web server (Nginx, Apache) with similar rewrite rules to serve the correct HTML for client-side routes within each page [citation:9][citation:8].

Selecting the appropriate MPA configuration method depends on your specific needs. Manual configuration with rollupOptions.input is ideal for small projects with a handful of pages where you want maximum control [citation:7]. Convention-based plugins like @zhoumutou/vite-plugin-mpa excel in larger projects with consistent page structures, reducing boilerplate [citation:2]. Virtual HTML plugins like vite-plugin-virtual-mpa are best when you need template engines, dynamic page generation, or complex output structures [citation:6]. For enterprise applications with multiple user roles (admin, user, public), the multi-entry approach with shared components provides excellent code reuse while maintaining separation [citation:9].