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
<title></title>.
Usage
yarn add -D vite-plugin-html-template// 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
// 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',
},
}Underlying
- Thanks to vite-plugin-virtual-html
- Thanks to vite-plugin-vue-cli