English | 中文
FeaturesHTML compression capabilityEJS template capabilityMulti-page application supportSupport custom entrySupport custom templateInstall (yarn or npm)node version: >=12.0.0
vite version: >=2.0.0
yarn add vite-plugin-html -D或
npm i vite-plugin-html -DUsageAdd EJS tags to index.html, e.g. Configure in vite.config.ts, this method can introduce the required functions as neededimport { 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: ``,},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: ``,},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: ``,},tags: [ {injectTo: 'body-prepend',tag: 'div',attrs: { id: 'tag2',}, },], },}, ],}), ],})Parameter DescriptioncreateHtmlPlugin(options: UserOptions)
UserOptionsParameterTypesDefaultDescriptionentrystringsrc/main.tsentry file pathtemplatestringindex.htmlrelative path to the templateinjectInjectOptions-Data injected into HTMLminifyboolean｜MinifyOptions-whether to compress htmlpagesPageOption-Multi-page configurationInjectOptionsParameterTypesDefaultDescriptiondataRecord-injected dataejsOptionsEJSOptions-ejs configuration OptionsEJSOptionstagsHtmlTagDescriptor-List of tags to injectdata can be accessed in html using the ejs template syntax
Env injectBy default, the contents of the .env file will be injected into index.html, similar to vite's loadEnv function
PageOptionParameterTypesDefaultDescriptionfilenamestring-html file nametemplatestringindex.htmlrelative path to the templateentrystringsrc/main.tsentry file pathinjectOptionsInjectOptions-Data injected into HTMLMinifyOptionsDefault compression configuration
collapseWhitespace: true,keepClosingSlash: true,removeComments: true,removeRedundantAttributes: true,removeScriptTypeAttributes: true,removeStyleLinkTypeAttributes: true,useShortDoctype: true,minifyCSS: true,Run the playgroundpnpm install# spacd ./packages/playground/basicpnpm run dev# mapcd ./packages/playground/mpapnpm run devExample projectVben Admin
LicenseMIT