3个vite-plugin-html配置技巧让开发效率翻倍
【免费下载链接】vite-plugin-html项目地址: https://gitcode.com/gh_mirrors/vit/vite-plugin-html
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>`, }, }, }), ], })效果展示：插件会自动加载.env文件中的环境变量，并通过EJS模板语法在HTML中使用这些变量。
进阶技巧：可以通过ejsOptions配置自定义EJS渲染选项，满足更复杂的模板需求。
配置优化与避坑指南
安装注意事项：
- Node.js版本需>=12.0.0
- Vite版本需>=2.0.0
- 推荐使用pnpm进行依赖管理
性能优化建议：
- 生产环境务必开启minify选项
- 合理使用tags数组进行资源预加载
- 利用环境变量实现配置差异化
通过这三个配置技巧的组合使用，你可以在不同项目场景下灵活运用vite-plugin-html，无论是简单的单页面应用还是复杂的多页面系统，都能找到合适的配置方案。从基础配置到高级应用，逐步掌握这个强大插件的全部潜力。
【免费下载链接】vite-plugin-html项目地址: https://gitcode.com/gh_mirrors/vit/vite-plugin-html
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
