vite-plugin-html 安装和配置指南

2026-01-21 05:21:25作者：范靓好Udolf

**vite-plugin-html**：赋能你的Vite项目，轻松管理与优化HTML体验。支持HTML压缩和EJS模板引擎，无缝适配多页面应用，让每一页都精致且高效。通过自定义入口与模板，灵活注入数据与脚本，无需手动添加标签，一切配置即可自动完成。无论是单页应用还是复杂项目，它都能让你的网页加载更快，维护更简单。拥抱**vite-plugin-html**，解锁前端构建的新效能，即刻提升用户体验！

项目地址：https://gitcode.com/gh_mirrors/vit/vite-plugin-html

1. 项目基础介绍和主要的编程语言

项目基础介绍

vite-plugin-html 是一个用于处理 HTML 的 Vite 插件。它提供了 HTML 压缩、EJS 模板支持、多页面应用支持、自定义入口和模板等功能。该项目旨在帮助开发者更高效地处理和优化 HTML 文件，适用于现代前端开发环境。

主要的编程语言

该项目主要使用 TypeScript 进行开发，同时也涉及到 HTML、JavaScript 和 Vue 等前端技术。

2. 项目使用的关键技术和框架

关键技术和框架

Vite: 一个快速的构建工具，特别适用于现代前端项目。
EJS: 一种简单的模板语言，用于生成 HTML。
Lodash: 一个实用的 JavaScript 工具库，提供了很多常用的函数。
Vue: 一个流行的前端框架，用于构建用户界面。

3. 项目安装和配置的准备工作和详细的安装步骤

准备工作

在开始安装和配置之前，请确保你已经安装了以下软件：

Node.js: 版本 >= 12.0.0
Vite: 版本 >= 2.0.0

安装步骤

1. 安装 Node.js 和 Vite

如果你还没有安装 Node.js 和 Vite，可以通过以下命令进行安装：

# 安装 Node.js
# 访问 https://nodejs.org/ 下载并安装适合你操作系统的版本

# 安装 Vite
npm install -g create-vite

2. 创建一个新的 Vite 项目

如果你还没有 Vite 项目，可以通过以下命令创建一个新的项目：

# 创建一个新的 Vite 项目
npm create vite@latest my-vite-project

# 进入项目目录
cd my-vite-project

# 安装依赖
npm install

3. 安装 vite-plugin-html

在项目根目录下，运行以下命令来安装 vite-plugin-html：

npm install vite-plugin-html -D

4. 配置 vite.config.ts

在项目的 vite.config.ts 文件中，添加 vite-plugin-html 的配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createHtmlPlugin } from 'vite-plugin-html';

export default defineConfig({
  plugins: [
    vue(),
    createHtmlPlugin({
      minify: true,
      entry: 'src/main.ts',
      template: 'public/index.html',
      inject: {
        data: {
          title: 'index',
          injectScript: `<script src="/inject.js"></script>`,
        },
        tags: [
          {
            injectTo: 'body-prepend',
            tag: 'div',
            attrs: {
              id: 'tag',
            },
          },
        ],
      },
    }),
  ],
});

5. 配置 index.html

在 public/index.html 文件中，添加 EJS 标签以使用插件提供的功能：

<!DOCTYPE html>
<html lang="en">
<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>
<body>
  <div id="app"></div>
</body>
</html>