English | 中文
A Vite plugin for index.html that provides minify and EJS template-based functionality.
node version: >=12.0.0
vite version: >=2.0.0
yarn add vite-plugin-html -D
or
npm i vite-plugin-html -D
- Config plugin in vite.config.ts. In this way, the required functions can be introduced as needed
import { defineConfig, Plugin } from 'vite';
import vue from '@vitejs/plugin-vue';
import { minifyHtml, injectHtml } from '../src/index';
export default defineConfig({
plugins: [
vue(),
minifyHtml(),
injectHtml({
injectData: {
title: 'vite-plugin-html-example',
injectScript: '<script src="./inject.js"></script>',
},
}),
],
});- If you don’t want to separate, you can directly Import it as a whole
import { defineConfig, Plugin } from 'vite';
import vue from '@vitejs/plugin-vue';
import html from '../src/index';
export default defineConfig({
plugins: [
vue(),
html({
inject: {
injectData: {
title: 'vite-plugin-html-example',
injectScript: '<script src="./inject.js"></script>',
},
},
minify: true,
}),
],
});injectHtml(InjectOptions)
InjectOptions
| Parameter | Types | Default | Description |
|---|---|---|---|
| injectData | Record<string, any> |
- | Injected data |
| injectOptions | EJSOptions |
- | ejs configuration itemsEJSOptions |
| tags | HtmlTagDescriptor |
- | An array of tag descriptor objects ({ tag, attrs, children }) to inject to the existing HTML. Each tag can also specify where it should be injected to (default is prepending to <head>)） |
injectData can be obtained using the ejs template syntax in index.html
minifyHtml(MinifyOptions | boolean): Defaulttrue
MinifyOptions
Default compression configuration
collapseBooleanAttributes: true,
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
minifyURLs: true,
removeAttributeQuotes: true,
removeComments: true,
removeEmptyAttributes: true,Run Example
cd ./example
yarn install
yarn serve
MIT