vite-plugin-html 常见问题解决方案
vite-plugin-html 项目地址: https://gitcode.com/gh_mirrors/vit/vite-plugin-html
项目基础介绍
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>` } } } ] }) ] });
- 确保每个页面的
entry
、filename
和template
路径正确无误。 - 检查生成的 HTML 文件,确保所有必要的脚本和样式都已正确注入。
通过以上步骤,新手可以更好地理解和使用 vite-plugin-html
插件,避免常见问题的发生。
vite-plugin-html 项目地址: https://gitcode.com/gh_mirrors/vit/vite-plugin-html