English | 中文
- HTML compression capability
- EJS template capability
- Multi-page application support
- Support custom
entry - Support custom
template
node version: >=12.0.0
vite version: >=2.0.0
yarn add vite-plugin-html -D或
npm i vite-plugin-html -D- Add EJS tags to
index.html, e.g.
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%- title %></title>
<%- injectScript %>
</head>- Configure in
vite.config.ts, this method can introduce the required functions as needed
import { defineConfig, Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig({
plugins: [
vue(),
createHtmlPlugin({
minify: true,
/**
* After writing entry here, you will not need to add script tags in `index.html`, the original tags need to be deleted
* @default src/main.ts
*/
entry: 'src/main.ts',
/**
* If you want to store `index.html` in the specified folder, you can modify it, otherwise no configuration is required
* @default index.html
*/
template: 'public/index.html',
/**
* Data that needs to be injected into the index.html ejs template
*/
inject: {
data: {
title: 'index',
injectScript: `<script src="./inject.js"></script>`,
},
tags: [
{
injectTo: 'body-prepend',
tag: 'div',
attrs: {
id: 'tag',
},
},
],
},
}),
],
})Multi-page application configuration
import { defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig({
plugins: [
createHtmlPlugin({
minify: true,
pages: [
{
entry: 'src/main.ts',
filename: 'index.html',
template: 'public/index.html',
injectOptions: {
data: {
title: 'index',
injectScript: `<script src="./inject.js"></script>`,
},
tags: [
{
injectTo: 'body-prepend',
tag: 'div',
attrs: {
id: 'tag1',
},
},
],
},
},
{
entry: 'src/other-main.ts',
filename: 'other.html',
template: 'public/other.html',
injectOptions: {
data: {
title: 'other page',
injectScript: `<script src="./inject.js"></script>`,
},
tags: [
{
injectTo: 'body-prepend',
tag: 'div',
attrs: {
id: 'tag2',
},
},
],
},
},
],
}),
],
})createHtmlPlugin(options: UserOptions)
| Parameter | Types | Default | Description |
|---|---|---|---|
| entry | string |
src/main.ts |
entry file path |
| template | string |
index.html |
relative path to the template |
| inject | InjectOptions |
- | Data injected into HTML |
| minify | boolean｜MinifyOptions |
- | whether to compress html |
| pages | PageOption |
- | Multi-page configuration |
| Parameter | Types | Default | Description |
|---|---|---|---|
| data | Record<string, any> |
- | injected data |
| ejsOptions | EJSOptions |
- | ejs configuration OptionsEJSOptions |
| tags | HtmlTagDescriptor |
- | List of tags to inject |
data can be accessed in html using the ejs template syntax
By default, the contents of the .env file will be injected into index.html, similar to vite's loadEnv function
| Parameter | Types | Default | Description |
|---|---|---|---|
| filename | string |
- | html file name |
| template | string |
index.html |
relative path to the template |
| entry | string |
src/main.ts |
entry file path |
| injectOptions | InjectOptions |
- | Data injected into HTML |
Default compression configuration
collapseWhitespace: true,
keepClosingSlash: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true,
minifyCSS: true,pnpm install
# spa
cd ./packages/playground/basic
pnpm run dev
# map
cd ./packages/playground/mpa
pnpm run dev
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent