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 processing html. It is developed based on lodash template

Install (yarn or npm)

node version: >=12.0.0

vite version: >=2.0.0-beta.4

yarn add vite-plugin-html@next -D or npm i vite-plugin-html@next -D

Example

Run Example

cd ./examples

yarn install

yarn serve

Usage

Config plugin in vite.config.ts

import { UserConfigExport, ConfigEnv } from 'vite';
import vue from '@vitejs/plugin-vue';

import html from 'vite-plugin-html';

export default ({ command, mode }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),
      html({
        title: 'Vite App',
        minify: command === 'build',
        options: {
          injectConfig: '<script src="./a.js"></script>',
        },
        tags: [
          {
            tag: 'div',
            attrs: {
              src: './',
            },
            children: 'content',
            injectTo: 'body',
          },
        ],
      }),
    ],
  };
};

Options Description

title

type: string

default: ''

description: The content of the title tag of the index.html tag

minify

type: boolean|Options, Options

default: command === 'build' .

If it is an object type，Default:

  minifyCSS: true,
  minifyJS: true,
  minifyURLs: true,
  removeAttributeQuotes: true,
  trimCustomFragments: true,
  collapseWhitespace: true,

description: html compression configuration

options

type: Record<string,any>,

default: {}

description: User-defined configuration variables. You can use viteHtmlPluginOptions.xxx in index.html to get

Html Use lodash.template syntax for template processing

tags

type: HtmlTagDescriptor[]

interface HtmlTagDescriptor {
  tag: string;
  attrs?: Record<string, string>;
  children?: string | HtmlTagDescriptor[];
  /**
   * default: 'head-prepend'
   */
  injectTo?: 'head' | 'body' | 'head-prepend';
}

description: 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>)

e.g

vite.config.ts

import { UserConfigExport, ConfigEnv } from 'vite';
import vue from '@vitejs/plugin-vue';

import html from 'vite-plugin-html';

export default ({ command, mode }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),
      html({
        options: {
          opt1: '<script src="./a.js"></script>',
          opt2: '<script src="./a.js"></script>',
        },
      }),
    ],
  };
};

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <%= viteHtmlPluginOptions.opt1 %>
  </head>
  <body>
    <%= viteHtmlPluginOptions.opt2 %>
  </body>
</html>

License

MIT