vite-plugin-html完整使用指南：从入门到精通-程序员充电站

vite-plugin-html完整使用指南：从入门到精通

【免费下载链接】vite-plugin-html项目地址: https://gitcode.com/gh_mirrors/vit/vite-plugin-html

vite-plugin-html作为Vite生态系统中功能强大的HTML处理插件，通过EJS模板引擎和智能注入机制，为开发者提供了灵活的HTML动态配置能力。无论你是刚接触Vite的新手，还是需要构建复杂多页面应用的资深开发者，掌握这个插件的核心用法都能显著提升开发效率。

插件核心功能介绍

vite-plugin-html插件主要包含四大核心功能：

HTML压缩能力- 自动优化HTML文件，去除多余空格和注释，减小构建体积

EJS模板支持- 使用EJS模板语法实现动态内容注入

多页面应用构建- 轻松配置多个独立的HTML页面

自定义入口和模板- 灵活指定entry和template文件路径

环境要求：Node.js版本需>=12.0.0，Vite版本需>=2.0.0

基础配置快速上手

对于单页面应用，vite-plugin-html的基础配置非常简单实用。你只需要在HTML文件中添加EJS标签，然后在vite.config.ts中配置相应的注入数据。

配置步骤：

在index.html中使用EJS语法定义动态内容区域
配置vite.config.ts中的inject选项
启用HTML压缩优化构建输出

<head> <meta charset="UTF-8" /> <title><%- title %></title> <%- injectScript %> </head>

配置示例：

import { defineConfig } from 'vite' import { createHtmlPlugin } from 'vite-plugin-html' export default defineConfig({ plugins: [ createHtmlPlugin({ minify: true, inject: { data: { title: '我的应用', injectScript: `<script src="./inject.js"></script>`, }, tags: [ { injectTo: 'body-prepend', tag: 'div', attrs: { id: 'app-container' }, }, ], }, }), ], })

多页面应用实战配置

当项目需要构建多个独立页面时，vite-plugin-html的pages配置能够完美满足需求。每个页面都可以有独立的入口文件、模板配置和数据注入选项。

多页面配置优势：

每个页面独立配置，互不干扰
支持自定义entry和template路径
灵活的injectOptions配置

export default defineConfig({ plugins: [ createHtmlPlugin({ minify: true, pages: [ { entry: 'src/main.ts', filename: 'index.html', template: 'public/index.html', injectOptions: { data: { title: '首页' }, tags: [{ injectTo: 'body-prepend', tag: 'div', attrs: { id: 'home' } }], }, }, { entry: 'src/other-main.ts', filename: 'other.html', template: 'public/other.html', injectOptions: { data: { title: '其他页面' }, }, }, ], }), ], })

环境变量与模板集成

vite-plugin-html支持环境变量的动态注入，让你能够在不同环境中使用不同的HTML配置。这对于开发环境和生产环境的差异化配置特别有用。

环境变量使用场景：

动态设置页面标题
配置不同的API地址
条件渲染特定内容

createHtmlPlugin({ minify: true, inject: { data: { title: process.env.NODE_ENV === 'development' ? '开发环境' : '生产环境', apiUrl: process.env.VITE_API_URL, }, }, })

配置参数详解

UserOptions核心参数

参数名	类型	默认值	描述
entry	string	src/main.ts	入口文件路径
template	string	index.html	模板文件相对路径
inject	InjectOptions	-	HTML注入数据
minify	boolean｜MinifyOptions	-	HTML压缩配置
pages	PageOption	-	多页面配置