vite-plugin-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想让 index.html 动态写入数据、把 HTML 压得更小或者搞多页面开发vite-plugin-html 一个插件就能把三件事都兜住。你无论是新起一个 Vite 项目还是在老项目里加注入能力照下面这条流程走几分钟就能接完。动手前先确认这两样两个版本门槛先看清插件对 Vite 的最低要求是 2.xNode 不能低于 12。Node.js ≥ 12.0.0Vite ≥ 2.0.0终端跑npm ls vite可查当前版本底层用 EJS 渲染模板、html-minifier-terser 做压缩官方示例则以 Vue 项目演示技术栈就这一行够了。30 秒装好插件一条命令流搞定建项目和装依赖不用来回切换。npm create vitelatest my-app cd my-app npm install vite-plugin-html -D第一行生成标准 Vite 工程框架选你顺手的比如 vue-ts第二行把插件挂进 devDependencies。项目里已经有 Vite 的话直接执行第二行就行。在 vite.config.ts 里打开它往 plugins 数组里塞一个createHtmlPlugin字段全用行内注释解释抄走就能用。import { defineConfig } from vite import { createHtmlPlugin } from vite-plugin-html export default defineConfig({ plugins: [ createHtmlPlugin({ minify: true, // 打开压缩去掉 html 里的空白和注释 entry: src/main.ts, // 入口自动替掉模板里手写的 script 标签 template: index.html, // 模板文件位置默认就是根目录 inject: { data: { title: 我的站点 }, // 变量注入用 EJS 占位符在模板里消费 tags: [{ tag: div, attrs: { id: tag }, injectTo: body-prepend }], // DOM 注入模板里不用写占位符 }, }), ], })两种注入方式按场景挑data传的是值模板里得留占位符接tags直接把 DOM 贴到指定位置模板保持干净。让 index.html 接住注入的数据在要显示数据的地方埋 EJS 占位符三五行就够。!DOCTYPE html html head title%- title %/title /head bodydiv idapp/div/body /html两种写法别搞混% %会对特殊字符做转义适合普通文本%- %原样输出往页面里塞完整script片段时必须用它。跑起来 常见坑npm run dev启动浏览器打开就能看到注入效果。不通的话按顺序查这三处npm run deventry 指错路径相对项目根目录解析文件不存在时页面只剩空白骨架、还不报明显错误先核对拼写和目录。模板放 public 下Vite 会把 public 原样拷进输出目录模板若也放里面dist 里容易出现两套 html非必要保持模板在根目录。injectTo 用错位置body-prepend表示塞进body内部开头不是追加到 head 尾部位置填歪了布局会跟着乱。其余字段细节见 README.zh_CN.md【免费下载链接】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），仅供参考