Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hex-ci/vite-plugin-virtual-html-template
HTML template for vite app, support flexible virtual URL.
https://github.com/hex-ci/vite-plugin-virtual-html-template
vite vite-plugin vitejs
Last synced: 3 months ago
JSON representation
HTML template for vite app, support flexible virtual URL.
- Host: GitHub
- URL: https://github.com/hex-ci/vite-plugin-virtual-html-template
- Owner: hex-ci
- License: mit
- Created: 2021-06-25T07:04:36.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-20T11:02:20.000Z (over 1 year ago)
- Last Synced: 2024-09-30T02:29:55.906Z (3 months ago)
- Topics: vite, vite-plugin, vitejs
- Language: JavaScript
- Homepage:
- Size: 23.4 KB
- Stars: 31
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-virtual-html-template
[](https://www.npmjs.com/package/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.
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](https://github.com/IndexXuan/vite-plugin-html-template).