vite-plugin-html v3.2.2

vite-plugin-html

English | 中文

A Vite plugin for index.html that provides minify and EJS template-based functionality.

Install (yarn or npm)

node version: >=12.0.0

vite version: >=2.0.0

yarn add vite-plugin-html -D

or

npm i vite-plugin-html -D

Usage

• 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 Parameter Description

injectHtml(InjectOptions)

InjectOptions

injectData can be obtained using the ejs template syntax in index.html

minifyHtml Parameter Description

minifyHtml(MinifyOptions | boolean): Defaulttrue

MinifyOptions

Default compression configuration

  collapseBooleanAttributes: true,
  collapseWhitespace: true,
  minifyCSS: true,
  minifyJS: true,
  minifyURLs: true,
  removeAttributeQuotes: true,
  removeComments: true,
  removeEmptyAttributes: true,

Example

Run Example

cd ./example

yarn install

yarn serve

Sample project

Vben Admin

License

MIT