3个vite-plugin-html配置技巧让开发效率翻倍-程序员充电站

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中使用这些变量。