{"id":22694,"library":"vite-plugin-html-template-mpa","title":"vite-plugin-html-template-mpa","description":"Vite plugin for HTML template injection and multi-page application (MPA) support. Current stable version 1.0.33, with ongoing active development. Provides HTML minification, EJS template data injection, custom entry/template, and build output configuration including HTML hash, directory restructuring, and prefix replacement. Differentiates from alternatives like vite-plugin-html by actively supporting Vite 5 and offering built-in MPA features with a pages configuration system, while the older plugin is unmaintained. Ships TypeScript types.","status":"active","version":"1.0.33","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/Miofly/vite-plugin-html-template-mpa","tags":["javascript","vite-plugin","mpa","MPA","multi-page","html-template","typescript"],"install":[{"cmd":"npm install vite-plugin-html-template-mpa","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-html-template-mpa","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-html-template-mpa","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM-only; plugin provides a default export.","wrong":"const htmlTemplate = require('vite-plugin-html-template-mpa')","symbol":"htmlTemplate","correct":"import htmlTemplate from 'vite-plugin-html-template-mpa'"},{"note":"Type-only import; Options is a TypeScript interface, not a runtime value.","wrong":"import { Options } from 'vite-plugin-html-template-mpa'","symbol":"Options","correct":"import type { Options } from 'vite-plugin-html-template-mpa'"},{"note":"Type-only import for the page configuration interface.","wrong":null,"symbol":"PageOptions","correct":"import type { PageOptions } from 'vite-plugin-html-template-mpa'"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport htmlTemplate from 'vite-plugin-html-template-mpa';\n\n// Multi-page application configuration\nexport default defineConfig({\n  plugins: [\n    htmlTemplate({\n      pagesDir: 'src/views',\n      pages: {\n        'index': {\n          title: 'Home',\n          entry: 'src/views/index/main.ts',\n          template: 'public/index.html',\n        },\n        'about': {\n          title: 'About Us',\n          entry: 'src/views/about/main.ts',\n          inject: {\n            data: {\n              title: 'About',\n            },\n            tags: [\n              { injectTo: 'head', tag: 'meta', attrs: { name: 'description', content: 'About page' } }\n            ],\n          },\n        },\n      },\n      minify: true,\n      buildCfg: {\n        moveHtmlTop: true,\n        htmlHash: true,\n      },\n    }),\n  ],\n});","lang":"typescript","description":"Configures Vite for MPA with custom pages, HTML minification, and build output restructuring."},"warnings":[{"fix":"Refer to the updated documentation; the default `pagesDir` changed to `src/views`.","message":"API changes in version > 1.0.0: options and behavior differ from earlier versions.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Set `pagesDir` to your actual pages directory, e.g., `pagesDir: 'src/pages'`.","message":"Multi-page app directory default changed to `src/views`; if your pages are elsewhere, set `pagesDir` explicitly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `urlParams` for adding parameters to the generated index page links, not individual page templates.","message":"Page configuration `urlParams` adds query parameters to the root navigation page only.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Migrate from `vite-plugin-html` to this plugin for Vite 5 compatibility.","message":"Previous plugin `vite-plugin-html` is unmaintained; this plugin intends to replace its functionality for SPA.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `pnpm add vite-plugin-html-template-mpa` and use default import as shown in quickstart.","cause":"Plugin not installed or wrong import path.","error":"Error: Cannot find module 'vite-plugin-html-template-mpa'"},{"fix":"Use `import htmlTemplate from 'vite-plugin-html-template-mpa'`.","cause":"Using named import instead of default import.","error":"TypeError: htmlTemplate is not a function"},{"fix":"Add `pagesDir` to the plugin options, e.g., `pagesDir: 'src/views'`.","cause":"Missing `pagesDir` configuration for MPA.","error":"Vite build error: The 'pagesDir' option is required for multi-page mode."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}