vite-plugin-virtual-html-template

HTML template for vite app, support flexible virtual URL.

Motivation

• Vite need html for entry file, which means we must have
  • projectRoot/index.html for SPA
  • projectRoot/app1.html, projectRoot/app2.html, projectRoot/sub/page/app3.html for MPA
• Why not we use html template for all entry html
• Also we should support lodash.template syntax for the html content, like setting <title></title>.

Usage

npm i --save-dev vite-plugin-virtual-html-template

// vite.config.js
import virtualHtmlTemplate from 'vite-plugin-virtual-html-template'

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

Options

// you can custom template path(default is public/index.html) and page title
{
  // define pages, if SPA uses this plugin, the index page must be set
  pages: {
    index: {
      template: 'public/index.html',
      title: 'Home Page',
      // If entry is not set, the entry will not be added to the HTML.
      entry: 'src/main.js'
    },
    app: {
      template: 'public/index.html',
      title: 'App Page',
      entry: 'src/app/main.js'
    },
    'sub/other': {
      template: 'public/index.html',
      title: 'Sub Page',
      entry: 'src/sub/other/main.js'
    }
  },
  // expose to template
  data: {
    title: 'Home Page',
  }
}

The key of pages and the URL are associated with the following rules: http://127.0.0.1/${key} (history router mode) or http://127.0.0.1/${key}.html, where key supports multi-level paths.

After starting the dev server, browse:

• http://127.0.0.1/index.html : Use public/index.html as the template and src/main.js as the entry.
• http://127.0.0.1/app.html : Use public/index.html as the template and src/app/main.js as the entry.
• http://127.0.0.1/sub/other.html or http://127.0.0.1/sub/other (history router mode): Use public/index.html as the template and src/sub/other/main.js as the entry.

The URL structure after the project is constructed is the same as that during development:

• http://domain.com/index.html
• http://domain.com/app.html
• http://domain.com/sub/other.html

For MPA, The key of pages and the build.rollupOptions.input are associated with the following rules:

{
  build: {
    rollupOptions: {
      input: {
        app1: path.resolve(__dirname, `index.html`), // The file name is associated with `pages.index` after removing the extension.
        app2: path.resolve(__dirname, `app.html`), // The file name is associated with `pages.app` after removing the extension.
        app3: path.resolve(__dirname, `sub/other.html`), // The file name is associated with `pages['sub/other']` after removing the extension.
      }
    }
  }
}

Thanks

The idea and part of the code for this plugin comes from vite-plugin-html-template.