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

1yarn add -D vite-plugin-html-template

1// vite.config.ts
2import htmlTemplate from 'vite-plugin-html-template'
3
4// @see https://vitejs.dev/config/
5export default defineConfig({
6  plugins: [
7    // ...other plugins
8    htmlTemplate(/* options */),
9  ],
10})

Options

• like vue-cli#pages

1// for SPA, there is nothing to do, just use `public/index.html` as template
2
3// for MPA, customise the template path (default is `public/index.html`) and page title:
4{
5  // where is the pages' root directory?
6  pagesDir: 'src/pages',
7  // define pages like it is done in vue-cli
8  pages: {
9    index: {
10      template: './public/index.html',
11      title: 'Homepage',
12    },
13    subpage: {
14      template: './src/pages/subpage/index.html',
15      title: 'Subpage',
16    },
17  },
18  // expose to template
19  data: {
20    title: 'Homepage',
21  },
22}

• see more

Underlying

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

Further

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