vite-plugin-html 常见问题解决方案

2026-01-21 04:08:54作者：申梦珏Efrain

项目基础介绍

vite-plugin-html 是一个用于处理 HTML 的 Vite 插件，它基于 lodash 模板开发。该插件提供了 HTML 压缩、EJS 模板支持、多页面应用支持、自定义入口和自定义模板等功能。主要用于在 Vite 项目中简化 HTML 文件的处理流程。

新手使用注意事项及解决方案

1. 安装依赖版本不匹配

问题描述：新手在安装 vite-plugin-html 时，可能会遇到依赖版本不匹配的问题，导致插件无法正常工作。

解决步骤：

确保 Node.js 版本 >= 12.0.0。
确保 Vite 版本 >= 2.0.0。

使用以下命令安装插件：

yarn add vite-plugin-html -D
# 或
npm i vite-plugin-html -D

2. HTML 文件中未正确添加 EJS 标签

问题描述：新手在使用插件时，可能会忘记在 HTML 文件中添加 EJS 标签，导致模板数据无法正确注入。

解决步骤：

打开 index.html 文件。

在 <head> 标签内添加 EJS 标签，例如：

<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>

确保在 vite.config.ts 中正确配置了 inject 选项，例如：

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: 'index',
          injectScript: `<script src="/inject.js"></script>`
        }
      }
    })
  ]
});

3. 多页面应用配置错误

问题描述：新手在配置多页面应用时，可能会出现配置错误，导致页面无法正确加载。

解决步骤：

确保在 vite.config.ts 中正确配置了多页面应用的 pages 选项，例如：

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>`
            }
          }
        }
      ]
    })
  ]
});