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 .

Usage

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

`js
// 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

`js
// 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:

`js
{
build: {
rollupOptions: {
input: {
app1: path.resolve(__dirname, index.html), // The file name is associated with pages.index after removing the extension.
app1: path.resolve(__dirname, app.html), // The file name is associated with pages.app after removing the extension.
app2: 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.