Home

Awesome

vite-plugin-html

English | 中文

Features

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

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%- title %></title>
  <%- injectScript %>
</head>
import { 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: `<script src="./inject.js"></script>`,
        },
        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: `<script src="./inject.js"></script>`,
            },
            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: `<script src="./inject.js"></script>`,
            },
            tags: [
              {
                injectTo: 'body-prepend',
                tag: 'div',
                attrs: {
                  id: 'tag2',
                },
              },
            ],
          },
        },
      ],
    }),
  ],
})

Parameter Description

createHtmlPlugin(options: UserOptions)

UserOptions

ParameterTypesDefaultDescription
entrystringsrc/main.tsentry file path
templatestringindex.htmlrelative path to the template
injectInjectOptions-Data injected into HTML
minifyboolean|MinifyOptions-whether to compress html
pagesPageOption-Multi-page configuration

InjectOptions

ParameterTypesDefaultDescription
dataRecord<string, any>-injected data
ejsOptionsEJSOptions-ejs configuration OptionsEJSOptions
tagsHtmlTagDescriptor-List of tags to inject

data can be accessed in html using the ejs template syntax

Env inject

By default, the contents of the .env file will be injected into index.html, similar to vite's loadEnv function

PageOption

ParameterTypesDefaultDescription
filenamestring-html file name
templatestringindex.htmlrelative path to the template
entrystringsrc/main.tsentry file path
injectOptionsInjectOptions-Data injected into HTML

MinifyOptions

Default compression configuration

    collapseWhitespace: true,
    keepClosingSlash: true,
    removeComments: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    useShortDoctype: true,
    minifyCSS: true,

Run the playground

pnpm install

# spa
cd ./packages/playground/basic

pnpm run dev

# map
cd ./packages/playground/mpa

pnpm run dev

Example project

Vben Admin

License

MIT