vite-plugin-html-template

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

> It works perfectly together with vite-plugin-mpa.

Motivation

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

Usage

``sh
yarn add -D vite-plugin-html-template
`

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

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

Options

- like vue-cli#pages
`ts
// for SPA, there is nothing to do, just use public/index.html as template

// for MPA, customise the template path (default is public/index.html) and page title:
{
// where is the pages' root directory?
pagesDir: 'src/pages',
// define pages like it is done in vue-cli
pages: {
index: {
template: './public/index.html',
title: 'Homepage',
},
subpage: {
template: './src/pages/subpage/index.html',
title: 'Subpage',
},
},
// expose to template
data: {
title: 'Homepage',
},
}
``

- see more

Underlying

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

Further

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