3个vite-plugin-html配置技巧让开发效率翻倍

2026-02-06 04:36:11作者：卓炯娓

vite-plugin-html作为Vite生态中强大的HTML处理插件，通过EJS模板引擎和智能注入机制，让开发者能够轻松实现动态内容注入、多页面应用构建和HTML压缩优化。掌握这些配置技巧，能够显著提升前端开发效率和项目质量。

技巧一：基础配置与EJS模板注入

配置场景：单页面应用中需要动态设置页面标题、注入脚本或样式资源时，基础配置是最实用的入门技巧。

实现步骤：

在HTML文件中使用EJS标签定义动态内容
配置vite.config.ts中的inject选项
启用HTML压缩功能优化构建输出

<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 } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from 'vite-plugin-html'

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

效果展示：配置完成后，构建时插件会自动将数据注入到HTML模板中，生成完整的静态页面。

提示：minify选项默认为true，会自动启用HTML压缩，去除多余空格和注释，减小文件体积。

技巧二：多页面应用配置实战

配置场景：项目中需要构建多个独立页面，每个页面有各自的入口文件和模板配置。

实现步骤：

使用pages数组定义多个页面配置
为每个页面指定entry、filename和template
配置各自独立的injectOptions

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: 'index.html',
          injectOptions: {
            data: {
              title: '首页',
              injectScript: `<script src="./inject.js"></script>`,
            },
            tags: [
              {
                injectTo: 'body-prepend',
                tag: 'div',
                attrs: {
                  id: 'home-container',
                },
              },
            ],
          },
        },
        {
          entry: 'src/other-main.ts',
          filename: 'other.html',
          template: 'other.html',
          injectOptions: {
            data: {
              title: '其他页面',
              injectScript: `<script src="./inject.js"></script>`,
            },
            tags: [
              {
                injectTo: 'body-prepend',
                tag: 'div',
                attrs: {
                  id: 'other-container',
                },
              },
            ],
          },
        },
      ],
    }),
  ],
})

效果展示：构建后会在输出目录生成index.html和other.html两个页面文件，每个页面都有独立的配置和数据注入。

注意事项：在多页面配置中，确保每个页面的entry路径正确，否则会导致构建失败。

技巧三：环境变量与自定义模板集成

配置场景：需要在不同环境中动态配置HTML内容，或使用自定义模板文件进行页面渲染。

实现步骤：

配置template选项指定自定义模板路径
使用entry选项自动管理脚本注入
结合环境变量实现条件渲染

import { defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      minify: true,
      entry: 'src/main.ts',
      template: 'public/index.html',
      inject: {
        data: {
          title: process.env.NODE_ENV === 'development' ? '开发环境' : '生产环境',
          apiUrl: process.env.VITE_API_URL,
          injectScript: `<script src="./inject.js"></script>`,
        },
      },
    }),
  ],
})