# Html 注入 Vite 插件
[](https://www.npmjs.com/package/vite-plugin-html-injection)
[](https://www.npmjs.com/package/vite-plugin-html-injection)
[🇬🇧 English](README.md) | [🇪🇸 Español](README.es.md) | [🇷🇺 Русский](README.ru.md) | [🇨🇳 中文](README.zh.md)
用于在 `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](https://github.com/vite-plugin-html-injection/issues) 提出改进建议，或通过 [fork、编辑、创建 Pull Request](https://github.com/vite-plugin-html-injection/pulls) 来扩展此 Vite 插件的功能。
## 许可证
MIT 许可证 © 2023-2025