vite-multiple-html
Features
- Multi-page application support
- Support custom
entry
- Support custom
template
- EJS template capability (Note: This simply implements some of the functions, And multiple pages share the same injectData, You cannot set different injections for different pages)
Usage
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
- Configure in
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import multipleHtml from '@beta-lib/vite-multiple-html';
export default defineConfig({
base: '/prop/html',
plugins: [
vue(),
multipleHtml({
packageList: [{
entry: 'src/main.ts',
filename: 'index',
templatePath: 'public.html'
}],
injectData:{
title: '这里是注入标题'
},
tempHtmlDir: 'htmlTempbbbbb'
})
],
})
UserOptions
| packageList | Array<PackageItem> | [] | multiple pages array |
| injectData | obj | {} | injectData |
| tempHtmlDir | string | htmlTemp | store HTML files generated |
PackageItem
| entry | string | - | entry file path |
| filename | string | - | Multi-page name |
| templatePath | string | - | relative path to the template |
dev
when you run your project in dev, you can access your vite devServer + tempHtmlDir to preview your project.
such as the example above http://127.0.0.1:xxx/prop/html/htmlTempbbbbb/
build
when you build, the tempHtmlDir will be remove, you can normal access to this.
such as http://127.0.0.1:xxx/prop/html/