如何用vite-plugin-html实现自定义Entry与Template？超简单配置教程

如何用vite-plugin-html实现自定义Entry与Template？超简单配置教程

【免费下载链接】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处理插件，能帮助开发者轻松实现自定义Entry与Template配置。本教程将带你快速掌握这一实用技能，让前端项目构建更灵活高效！

📦 准备工作：安装与基础配置

首先确保你的项目中已安装Vite，然后通过npm或pnpm安装vite-plugin-html：

npm install vite-plugin-html --save-dev # 或 pnpm add vite-plugin-html -D

基础配置只需在vite.config.ts中引入并注册插件：

import { defineConfig } from 'vite' import { createHtmlPlugin } from 'vite-plugin-html' export default defineConfig({ plugins: [ createHtmlPlugin({ // 配置项将在下文详细说明 }) ] })

🎯 核心功能1：自定义Entry配置

Entry配置决定了应用的入口文件，vite-plugin-html支持两种配置方式：

单页面应用(SPA)配置

在createHtmlPlugin中直接指定entry字段：

// packages/playground/custom-entry/vite.config.ts createHtmlPlugin({ entry: 'src/main.ts', // 指定入口文件路径 template: 'static/index.html', // 关联的HTML模板 })

多页面应用(MPA)配置

通过pages数组配置多个入口页面：

createHtmlPlugin({ pages: [ { entry: 'src/main.ts', // 第一个页面入口 template: 'index.html', // 对应模板 filename: 'index.html' }, { entry: 'src/other-main.ts', // 第二个页面入口 template: 'other.html', // 对应模板 filename: 'other.html' } ] })

🎨 核心功能2：自定义Template配置

模板配置让你可以指定HTML文件的路径和内容，支持以下高级用法：

基本模板指定

createHtmlPlugin({ template: 'static/index.html', // 自定义模板路径 })

模板数据注入

通过inject选项向模板注入动态数据：

// packages/playground/custom-entry/vite.config.ts createHtmlPlugin({ inject: { data: { title: '我的应用', // 注入标题变量 injectScript: `<script src="./inject.js"></script>`, // 注入脚本 }, }, })

在HTML模板中使用lodash模板语法接收数据：

<title><%= title %></title> <%= injectScript %>

⚙️ 完整配置示例

单页面应用完整配置

// packages/playground/custom-entry/vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { createHtmlPlugin } from 'vite-plugin-html' export default defineConfig({ server: { proxy: { '/api': 'http://localhost:8080', }, }, plugins: [ vue(), createHtmlPlugin({ minify: true, // 开启HTML压缩 entry: 'src/main.ts', // 入口文件 template: 'static/index.html', // 模板路径 inject: { data: { title: 'index', injectScript: `<script src="./inject.js"></script>`, }, }, }), ], })

多页面应用完整配置

// packages/playground/mpa/vite.config.ts示例 createHtmlPlugin({ pages: [ { entry: 'src/main.ts', template: 'index.html', filename: 'index.html', inject: { data: { title: '首页' } } }, { entry: 'src/other-main.ts', template: 'other.html', filename: 'other.html', inject: { data: { title: '其他页面' } } } ] })

🚀 常见问题与解决方案

Q: 配置后页面没有正确加载怎么办？

A: 检查以下几点：

1. entry路径是否正确指向你的入口文件
2. template路径是否存在且格式正确
3. 运行vite --debug查看详细构建日志

Q: 如何在开发环境和生产环境使用不同模板？

A: 结合Vite的模式配置：

createHtmlPlugin({ template: process.env.NODE_ENV === 'production' ? 'static/prod-index.html' : 'static/dev-index.html', })

📝 总结

vite-plugin-html通过简洁的API设计，让自定义Entry与Template变得异常简单。无论是单页面还是多页面应用，都能轻松应对。只需几步配置，就能让你的Vite项目构建流程更加灵活高效！

通过本文介绍的配置方法，你可以在packages/playground/custom-entry/和packages/playground/mpa/等示例项目中找到实际应用参考，快速上手使用这一强大工具。

【免费下载链接】vite-plugin-htmlA vite plugin for processing html. It is developed based on lodash template项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-html