vite-plugin-html-mpa

> HTML template for vite app, like html-webpack-plugin for webpack.

Motivation

- Vite need html for entry file, which means we must have
- projectRoot/index.html for SPA
- projectRoot/src/pages/*/index.html for MPA
- Why not we use html template for all entry html
- Also we should support ejs/lodash.template syntax for the html content, like setting .

Usage

``sh
yarn add vite-plugin-html-mpa
`

`ts
// vite.config.ts
import htmlTemplate from 'vite-plugin-html-mpa'

// @see https://vitejs.dev/config/
export default defineConfig({
plugins: [
// ...other plugins
htmlTemplate(/ options /),
],
})
`

Options

例子参考

`ts
// for SPA, you can do nothing, auto reuse public/index.html as template

// for MPA, you can custom template path(default is public/index.html) and page title
{
// where pages ?
pagesDir: 'src/pages',
// define pages like vue-cli
pages: {
index: {
template: './public/index.html',
title: 'Home Page',
},
subpage: {
template: './src/pages/subpage/index.html',
title: 'Sub Page',
},
},
// expose to template
data: {
title: 'Home Page',
},
}
``

- 更多配置

Underlying

- Thanks to vite-plugin-virtual-html
- Thanks to vite-plugin-vue-cli

Further

- vue-cli-plugin-vite
- vite-plugin-mpa