vite-plugin-html-insert

insert env variables in html file

install

npm

1npm install --save-dev vite-plugin-html-insert

yarn

1yarn add -D vite-plugin-html-insert

pnpm

1pnpm install -D vite-plugin-html-insert

usage

visit examplte config

1. inject variables from .env

vite.config.js

1import insertContentHtmlPlugin from 'vite-plugin-html-insert';
2
3export default {
4    plugins: [
5        insertContentHtmlPlugin()
6    ]
7}

.env file

VITE_TITLE=awesome

index.html

1<title> %VITE_TITLE% </title>

2. inject varibales from custom data

vite.config.js

1import insertContentHtmlPlugin from 'vite-plugin-html-insert';
2
3export default {
4    plugins: [
5        insertContentHtmlPlugin({
6            replacements: {
7                CDN_URL: 'https://cdn.me.com'
8            }
9        })
10    ]
11}

index.html

1<script>
2var CDN_URL = '%CDN_URL%';
3</script>

3. inject content by custom transform

vite.config.js

1import insertContentHtmlPlugin from 'vite-plugin-html-insert';
2
3export default {
4    plugins: [
5        insertContentHtmlPlugin({
6            transform: (content) => {
7                content = content.replace(/%VERSION%/, '2.0.1');
8                return content;
9            }
10        })
11    ]
12}

index.html

1<script>
2var VERSION = '%VERSION%';
3</script>