{"id":13417355,"url":"https://github.com/ahwgs/vite-plugin-html-config","last_synced_at":"2025-12-30T01:04:31.226Z","repository":{"id":45664297,"uuid":"348017391","full_name":"ahwgs/vite-plugin-html-config","owner":"ahwgs","description":"vite html config","archived":false,"fork":false,"pushed_at":"2024-08-31T10:05:21.000Z","size":240,"stargazers_count":53,"open_issues_count":0,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-01T13:37:26.670Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ahwgs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-15T15:10:39.000Z","updated_at":"2024-08-31T10:05:21.000Z","dependencies_parsed_at":"2024-01-07T18:04:58.016Z","dependency_job_id":"4ea228f1-2e75-46ba-b492-5edbdefeb317","html_url":"https://github.com/ahwgs/vite-plugin-html-config","commit_stats":{"total_commits":36,"total_committers":4,"mean_commits":9.0,"dds":"0.11111111111111116","last_synced_commit":"dc418c7089e3d9c390f9ff48062dc7428060538e"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahwgs%2Fvite-plugin-html-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahwgs%2Fvite-plugin-html-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahwgs%2Fvite-plugin-html-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahwgs%2Fvite-plugin-html-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahwgs","download_url":"https://codeload.github.com/ahwgs/vite-plugin-html-config/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243674783,"owners_count":20329160,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T22:00:35.688Z","updated_at":"2025-12-30T01:04:31.200Z","avatar_url":"https://github.com/ahwgs.png","language":"TypeScript","funding_links":[],"categories":["Plugins","TypeScript"],"sub_categories":["Framework-agnostic Plugins"],"readme":"# vite-plugin-html-config [![npm](https://img.shields.io/npm/v/vite-plugin-html-config.svg)](https://npmjs.com/package/vite-plugin-html-config)\n\nThis plugin helps us configure additional html\n\nThe plugin is based on vite transformIndexHtml hooks.\n\nIf we want to distinguish the environment and introduce resources in index.html, we can use this plugin.\nstand by, favicon url, metas config, link tag config, style tag config, headScripts config,body script config.\n\n## Install\n\nnode version: \u003e=12.0.0\n\nvite version: \u003e=5.0.0\n\n```bash\nyarn add vite-plugin-html-config -D\n```\n\n## Options\n\n- title : set your html title\n- favicon : html favicon url (href url)\n- metas : html meta tag, such as key=xx,value=xxx\n- links : html head link tag\n- style : html style string\n- headScripts : html head script\n- preHeadScripts : html script with head prepend\n- scripts : html script with body tag\n\n## Usage\n\n```javascript\n// vite.config.js\nimport htmlPlugin from 'vite-plugin-html-config'\n\nconst htmlPluginOpt = {\n  favicon: './logo.svg',\n  headScripts: [\n    `var msg = 'head script'\n     console.log(msg);`,\n    {\n      async: true,\n      src: 'https://abc.com/b.js',\n      type: 'module',\n    },\n    { content: `console.log('hello')`, charset: 'utf-8' },\n  ],\n  preHeadScripts: [\n    `var msg = 'pre head script'\n    console.log(msg);`,\n    {\n      async: true,\n      src: 'https://abc.com/b.js',\n      type: 'module',\n    },\n    { content: `console.log('hello')`, charset: 'utf-8' },\n  ],\n  scripts: [\n    `var msg = 'body script'\n     console.log(msg);`,\n    {\n      async: true,\n      src: 'https://abc.com/b.js',\n      type: 'module',\n    },\n  ],\n  metas: [\n    {\n      name: 'keywords',\n      content: 'vite html meta keywords',\n    },\n    {\n      name: 'description',\n      content: 'vite html meta description',\n    },\n    {\n      bar: 'custom meta',\n    },\n  ],\n  links: [\n    {\n      rel: 'stylesheet',\n      href: './style.css',\n    },\n    {\n      rel: 'modulepreload',\n      href: 'https://cn.vitejs.dev/assets/guide_api-plugin.md.6884005a.lean.js',\n    },\n  ],\n  style: `body { color: red; };*{ margin: 0px }`,\n}\n\nmodule.exports = {\n  plugins: [htmlPlugin(htmlPluginOpt)],\n}\n```\n\n## Example\n\nWe can inject different scripts through different environments\n\nsuch as:script in head,script in body and more.\n\nin config file\n\n```js\n// vite.config.js\n\nconst headScripts = []\n\n// from app env\nconst APP_ENV = 'pro'\n\nconst BAIDU_KEY = APP_ENV === 'pro' ? '123123' : 'xxxxxx'\n\nif (APP_ENV === 'pro') {\n  headScripts.push(\n    {\n      src: 'https://xxxxxxx/mito.js',\n      apikey: '123123123123123',\n      crossorigin: 'anonymous',\n    },\n    {\n      src: 'https://bbbbb.js',\n    }\n  )\n}\n\nconst htmlPluginOpt = {\n  headScripts,\n  metas: [\n    {\n      name: 'keywords',\n      content: 'vite html meta keywords',\n    },\n    {\n      name: 'description',\n      content: 'vite html meta description',\n    },\n  ],\n  links: [\n    {\n      rel: 'stylesheet',\n      href: './style.css',\n    },\n    {\n      rel: 'modulepreload',\n      href: 'https://www.google.com/xxx.js',\n    },\n  ],\n  scripts: [\n    `var _hmt = _hmt || [];\n(function() {\n  var hm = document.createElement(\"script\");\n  hm.src = \"https://hm.baidu.com/hm.js?${BAIDU_KEY}\";\n  var s = document.getElementsByTagName(\"script\")[0]; \n  s.parentNode.insertBefore(hm, s);\n})();`,\n  ],\n  style: 'body { color: red; };*{ margin: 0px }',\n}\nmodule.exports = {\n  plugins: [htmlPlugin(htmlPluginOpt)],\n}\n```\n\nbuild index.html\n\n```\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eVite React\u003c/title\u003e\n    \u003cmeta name=\"keywords\" content=\"vite html meta keywords\"\u003e\n    \u003cmeta name=\"description\" content=\"vite html meta description\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"./style.css\"\u003e\n    \u003clink rel=\"modulepreload\" href=\"https://www.google.com/xxx.js\"\u003e\n    \u003cstyle\u003e  body { color: red; };*{ margin: 0px }\u003c/style\u003e\n    \u003cscript src=\"https://xxxxxxx/mito.js\" apikey=\"123123123123123\" crossorigin=\"anonymous\" customTag=\"\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://bbbbb.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003cscript\u003evar _hmt = _hmt || [];\n(function() {\n  var hm = document.createElement(\"script\");\n  hm.src = \"https://hm.baidu.com/hm.js?123123\";\n  var s = document.getElementsByTagName(\"script\")[0];\n  s.parentNode.insertBefore(hm, s);\n})();\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nother example\n\n[https://github.com/saschazar21/jpeg-butcher/blob/main/vite.config.ts#L30](https://github.com/saschazar21/jpeg-butcher/blob/main/vite.config.ts#L30)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahwgs%2Fvite-plugin-html-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahwgs%2Fvite-plugin-html-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahwgs%2Fvite-plugin-html-config/lists"}