Html 注入 Vite 插件


🇬🇧 English | 🇪🇸 Español | 🇷🇺 Русский | 🇨🇳 中文

用于在 index.html 中注入 HTML、JS 和 CSS 代码片段的 Vite 插件。

目的

在开发前端应用程序时，通常需要将各种库集成到 index.html 文件中 - 例如，您可能需要包含 Google Analytics 的代码、PWA 服务工作者、Open Graph 和 Twitter Card 元数据、启动画面、客户支持小部件等。

因此，index.html 变得臃肿且难以管理。

该插件允许您将代码片段存储在单独的文件中，保持 index.html 干净整洁，并在构建时注入它们。无需在 index.html 中添加特殊的占位符标签。

该插件还支持 Vite 开发服务器的热模块替换（HMR），这意味着您可以编辑代码片段并立即在浏览器中看到结果。

此外，该插件支持开发和生产模式的不同配置。通过指定 buildModes 属性，您可以根据环境启用或禁用特定的代码片段，简化开发并在 dev 模式下禁用不必要的代码。

描述

代码片段有三种 类型 - raw、js 和 css。raw 片段按原样注入，而 js 和 css 片段分别被包装在
`




就是这样。执行 npm serve 或 npm build 命令后，代码片段将被注入。

签名

该插件是强类型的。以下是其配置的签名：

`ts
export interface IHtmlInjectionConfig {
injections: IHtmlInjectionConfigInjection[];
order?: "pre" | "post";
}

export interface IHtmlInjectionConfigInjection {
name?: string;
path: string;
type?: "raw" | "js" | "css"; // 默认为 'raw'
injectTo: "head" | "body" | "head-prepend" | "body-prepend";
buildModes?: "dev" | "prod" | "both"; // 默认为 'both'
}
``

如果您喜欢，请给个星星

谢谢！

贡献

您可以通过 GitHub Issues 提出改进建议，或通过 fork、编辑、创建 Pull Request 来扩展此 Vite 插件的功能。

许可证

MIT 许可证 © 2023-2025