HTML template for vite app, support flexible virtual URL.
MIT License
HTML template for vite app, support flexible virtual URL.
<title></title>
.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 */)
]
})
// 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:
public/index.html
as the template and src/main.js
as the entry.public/index.html
as the template and src/app/main.js
as the entry.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:
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.
}
}
}
}
The idea and part of the code for this plugin comes from vite-plugin-html-template.