【亲测免费】 vite-plugin-html 项目常见问题解决方案

2026-01-29 12:05:14作者：董斯意

项目基础介绍

vite-plugin-html 是一个用于处理 HTML 的 Vite 插件。它基于 Lodash 模板开发，提供了 HTML 压缩、EJS 模板支持、多页面应用支持等功能。该项目的主要编程语言是 JavaScript。

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

1. 安装依赖时版本不匹配

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

解决方案：

检查 Node.js 版本：确保你的 Node.js 版本 >= 12.0.0。
检查 Vite 版本：确保你的 Vite 版本 >= 2.0.0。

安装插件：使用以下命令安装插件：

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

2. HTML 模板配置错误

问题描述：新手在配置 HTML 模板时，可能会因为 EJS 标签使用不当导致页面无法正确渲染。

解决方案：

检查 EJS 标签：确保在 index.html 中正确使用 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 插件：在 vite.config.ts 中正确配置插件，例如：

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

3. 多页面应用配置问题

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

解决方案：

检查多页面配置：确保在 vite.config.ts 中正确配置多页面应用，例如：

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