vite-plugin-react-mpa
How it works
It will collect */index.[jt]sx? files under src/pages directory as entries, and generate corresponding HTML file for each entry.
Install
npm install --save-dev vite-plugin-react-mpaUsage
import { defineConfig } from 'vite';
import mpa from 'vite-plugin-react-mpa'
export default defineConfig({
plugins: [mpa()],
});It generates temporary files when it runs, so you need to add .mpa to the .gitignore.
Options
export type Options = {
/**
* The path of the template file, note that the file needs to be ejs.
*/
template?: string;
/**
* ID of the node to be mounted during page rendering.
* @default 'root'
*/
mountElementId?: string;
/**
* The paths of the global dependencies.
*/
globalImport?: string[];
/**
* Whether to lower case the output html file name.
* @default false
*/
lowerCase?: boolean;
/**
* The path of the layout component.
*/
layout?: string;
/**
* The directory where temporary files are stored.
* @default '.mpa'
*/
tempDir?: string;
}The page-level template
Create html.ejs at the same level as the page component to declare the page-level template. Note that the mountElementId is required.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="<%= mountElementId %>"></div>
</body>
</html>Layout
The page component will be passed as a child component to the Layout component.
export default function Layout({ children }) {
return children
}