Gathering detailed insights and metrics for vite-plugin-html-config
Gathering detailed insights and metrics for vite-plugin-html-config
Installations
npm install vite-plugin-html-configDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Min. Node Version
>=12.0.0
Node Version
20.16.0
NPM Version
10.8.1
Releases
4
Languages
3
TypeScript
HTML
CSS
TypeScript (89.6%)
HTML (9.42%)
CSS (0.98%)
Developer
ahwgs
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
54 Stars
45 Commits
11 Forks
1 Watchers
2 Branches
6 Contributors
Updated on Mar 23, 2025
Maintainers
1
Package Meta Information
Latest Version
2.0.2
Package Id
vite-plugin-html-config@2.0.2
Unpacked Size
17.36 kB
Size
4.39 kB
File Count
6
NPM Version
10.8.1
Node Version
20.16.0
Published on
Aug 31, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
4
vite-plugin-html-config 
This plugin helps us configure additional html
The plugin is based on vite transformIndexHtml hooks.
If we want to distinguish the environment and introduce resources in index.html, we can use this plugin. stand by, favicon url, metas config, link tag config, style tag config, headScripts config,body script config.
Install
node version: >=12.0.0
vite version: >=5.0.0
1yarn add vite-plugin-html-config -D
Options
- title : set your html title
- favicon : html favicon url (href url)
- metas : html meta tag, such as key=xx,value=xxx
- links : html head link tag
- style : html style string
- headScripts : html head script
- preHeadScripts : html script with head prepend
- scripts : html script with body tag
Usage
1// vite.config.js 2import htmlPlugin from 'vite-plugin-html-config' 3 4const htmlPluginOpt = { 5 favicon: './logo.svg', 6 headScripts: [ 7 `var msg = 'head script' 8 console.log(msg);`, 9 { 10 async: true, 11 src: 'https://abc.com/b.js', 12 type: 'module', 13 }, 14 { content: `console.log('hello')`, charset: 'utf-8' }, 15 ], 16 preHeadScripts: [ 17 `var msg = 'pre head script' 18 console.log(msg);`, 19 { 20 async: true, 21 src: 'https://abc.com/b.js', 22 type: 'module', 23 }, 24 { content: `console.log('hello')`, charset: 'utf-8' }, 25 ], 26 scripts: [ 27 `var msg = 'body script' 28 console.log(msg);`, 29 { 30 async: true, 31 src: 'https://abc.com/b.js', 32 type: 'module', 33 }, 34 ], 35 metas: [ 36 { 37 name: 'keywords', 38 content: 'vite html meta keywords', 39 }, 40 { 41 name: 'description', 42 content: 'vite html meta description', 43 }, 44 { 45 bar: 'custom meta', 46 }, 47 ], 48 links: [ 49 { 50 rel: 'stylesheet', 51 href: './style.css', 52 }, 53 { 54 rel: 'modulepreload', 55 href: 'https://cn.vitejs.dev/assets/guide_api-plugin.md.6884005a.lean.js', 56 }, 57 ], 58 style: `body { color: red; };*{ margin: 0px }`, 59} 60 61module.exports = { 62 plugins: [htmlPlugin(htmlPluginOpt)], 63}
Example
We can inject different scripts through different environments
such as:script in head,script in body and more.
in config file
1// vite.config.js 2 3const headScripts = [] 4 5// from app env 6const APP_ENV = 'pro' 7 8const BAIDU_KEY = APP_ENV === 'pro' ? '123123' : 'xxxxxx' 9 10if (APP_ENV === 'pro') { 11 headScripts.push( 12 { 13 src: 'https://xxxxxxx/mito.js', 14 apikey: '123123123123123', 15 crossorigin: 'anonymous', 16 }, 17 { 18 src: 'https://bbbbb.js', 19 } 20 ) 21} 22 23const htmlPluginOpt = { 24 headScripts, 25 metas: [ 26 { 27 name: 'keywords', 28 content: 'vite html meta keywords', 29 }, 30 { 31 name: 'description', 32 content: 'vite html meta description', 33 }, 34 ], 35 links: [ 36 { 37 rel: 'stylesheet', 38 href: './style.css', 39 }, 40 { 41 rel: 'modulepreload', 42 href: 'https://www.google.com/xxx.js', 43 }, 44 ], 45 scripts: [ 46 `var _hmt = _hmt || []; 47(function() { 48 var hm = document.createElement("script"); 49 hm.src = "https://hm.baidu.com/hm.js?${BAIDU_KEY}"; 50 var s = document.getElementsByTagName("script")[0]; 51 s.parentNode.insertBefore(hm, s); 52})();`, 53 ], 54 style: 'body { color: red; };*{ margin: 0px }', 55} 56module.exports = { 57 plugins: [htmlPlugin(htmlPluginOpt)], 58}
build index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite React</title>
<meta name="keywords" content="vite html meta keywords">
<meta name="description" content="vite html meta description">
<link rel="stylesheet" href="./style.css">
<link rel="modulepreload" href="https://www.google.com/xxx.js">
<style> body { color: red; };*{ margin: 0px }</style>
<script src="https://xxxxxxx/mito.js" apikey="123123123123123" crossorigin="anonymous" customTag=""></script>
<script src="https://bbbbb.js"></script>
</head>
<body>
<div id="root"></div>
<script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?123123";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script>
</body>
</html>
other example
https://github.com/saschazar21/jpeg-butcher/blob/main/vite.config.ts#L30
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 5/27 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 10 are checked with a SAST tool
Reason
23 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-mv48-hcvh-8jj8
- Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67
- Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
- Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
- Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
- Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
- Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
- Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
Score
1.9
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More