Awesome
vite-plugin-html
English | 中文
Features
- HTML compression capability
- EJS template capability
- Multi-page application support
- Support custom
entry
- Support custom
template
Install (yarn or npm)
node version: >=12.0.0
vite version: >=2.0.0
yarn add vite-plugin-html -D
或
npm i vite-plugin-html -D
Usage
- 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',
},
},
],
},
},
],
}),
],
})
Parameter Description
createHtmlPlugin(options: UserOptions)
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 |
InjectOptions
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
Env inject
By default, the contents of the .env
file will be injected into index.html, similar to vite's loadEnv
function
PageOption
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 |
MinifyOptions
Default compression configuration
collapseWhitespace: true,
keepClosingSlash: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true,
minifyCSS: true,
Run the playground
pnpm install
# spa
cd ./packages/playground/basic
pnpm run dev
# map
cd ./packages/playground/mpa
pnpm run dev
Example project
License
MIT