vite-plugin-html高级技巧：EJS模板语法与数据注入的艺术
vite-plugin-html高级技巧：EJS模板语法与数据注入的艺术
【免费下载链接】vite-plugin-htmlA vite plugin for processing html. It is developed based on lodash template项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-html
vite-plugin-html是一款基于lodash模板开发的Vite插件，专为HTML处理设计，提供了强大的EJS模板语法支持和灵活的数据注入能力，帮助开发者轻松实现HTML文件的动态化处理。
快速上手：EJS模板基础语法
EJS（Embedded JavaScript）是一种简单高效的模板语言，允许你在HTML中嵌入JavaScript代码。vite-plugin-html深度集成EJS语法，让HTML文件具备动态渲染能力。
变量输出
使用<%= %>标签输出变量值（会自动转义HTML特殊字符）：
<title><%= pageTitle %></title>使用<%- %>标签输出未转义的原始HTML内容：
<meta name="description" content="<%- metaDescription %>">条件判断
在HTML中实现条件渲染：
<% if (isProduction) { %> <script src="/analytics.js"></script> <% } %>循环结构
遍历数组生成列表：
<ul> <% for (const item of menuItems) { %> <li><%= item.name %></li> <% } %> </ul>数据注入：从配置到HTML的桥梁
vite-plugin-html提供了灵活的数据注入机制，让你可以轻松将配置数据传递到HTML模板中。
基础数据注入
在vite.config.ts中配置注入数据：
// vite.config.ts import { defineConfig } from 'vite' import { createHtmlPlugin } from 'vite-plugin-html' export default defineConfig({ plugins: [ createHtmlPlugin({ inject: { data: { title: '我的应用', injectScript: `<script src="./inject.js"></script>` } } }) ] })在HTML模板中使用注入的数据：
<!-- index.html --> <title><%- title %></title> ... <%- injectScript %>环境变量注入
vite-plugin-html会自动将Vite环境变量注入到模板中，你可以直接在HTML中使用：
<!-- index.html --> <div><%- ENV %></div> <div><%- NODE_ENV %></div>多页面应用数据注入
对于多页面应用，可以为不同页面配置独立的注入数据：
// vite.config.ts createHtmlPlugin({ pages: [ { filename: 'index.html', template: 'index.html', injectOptions: { data: { title: '首页', injectScript: `<script src="./home-inject.js"></script>` } } }, { filename: 'other.html', template: 'other.html', injectOptions: { data: { title: '其他页面', injectScript: `<script src="./other-inject.js"></script>` } } } ] })高级技巧：EJS模板配置与标签注入
EJS选项配置
你可以通过ejsOptions配置EJS的编译选项，如设置分隔符、启用调试等：
// vite.config.ts createHtmlPlugin({ inject: { ejsOptions: { delimiter: '$', // 自定义分隔符 debug: false // 禁用调试模式 } } })自定义标签注入
vite-plugin-html允许你通过配置向HTML中注入自定义标签，支持head、body等不同位置：
// vite.config.ts createHtmlPlugin({ inject: { tags: [ { tag: 'div', attrs: { id: 'app-loading' }, injectTo: 'body-prepend' // 注入到body开头 }, { tag: 'link', attrs: { rel: 'stylesheet', href: '/custom.css' }, injectTo: 'head' // 注入到head中 } ] } })实战案例：构建动态HTML页面
案例1：动态标题与元数据
// vite.config.ts createHtmlPlugin({ inject: { data: { pageTitle: 'Vite应用', metaDescription: '使用vite-plugin-html构建的动态HTML页面', keywords: 'vite, html, ejs, 模板' } } })<!-- index.html --> <head> <title><%= pageTitle %></title> <meta name="description" content="<%= metaDescription %>"> <meta name="keywords" content="<%= keywords %>"> </head>案例2：环境差异化配置
// vite.config.ts createHtmlPlugin({ inject: { data: { isProduction: process.env.NODE_ENV === 'production', apiBaseUrl: process.env.NODE_ENV === 'production' ? 'https://api.example.com' : 'http://localhost:3000' } } })<!-- index.html --> <script> window.__APP_CONFIG__ = { apiBaseUrl: '<%= apiBaseUrl %>', environment: '<%= NODE_ENV %>' }; </script> <% if (isProduction) { %> <script src="https://analytics.example.com/tracker.js"></script> <% } %>总结：提升HTML处理效率的最佳实践
vite-plugin-html通过EJS模板语法和灵活的数据注入机制，为Vite项目提供了强大的HTML处理能力。合理利用这些功能可以：
- 实现HTML内容的动态化
- 简化多页面应用的配置
- 实现环境差异化构建
- 提高开发效率和代码可维护性
要深入了解vite-plugin-html的更多功能，可以查看项目源码：
- 核心功能实现：htmlPlugin.ts
- 类型定义：typing.ts
- 示例配置：vite.config.ts
通过掌握这些高级技巧，你可以充分发挥vite-plugin-html的潜力，为你的Vite项目打造更加灵活和高效的HTML处理流程。
【免费下载链接】vite-plugin-htmlA vite plugin for processing html. It is developed based on lodash template项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-html
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考