Package Exports

vite-plugin-html

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vite-plugin-html) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

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 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