vite-plugin-html-public-path
v1.0.1
Published
Implement dynamic public path in index.html
Downloads
3
Maintainers
Readme
vite-plugin-html-public-path
Implement dynamic public path
in index.html
Why need the plugin?
Sometime, we need to set the public path
dynamically, for example, when we use vite
to build the project, we need to set the public path
according to the environment. but, we can't set the public path
in the index.html
file, so we need to use this plugin to transform all static link/script
tags to dynamic tags
Install
pnpm install vite-plugin-html-public-path -D
Usage
you can use initialPrefixScript
to return the public path
of the application.
import { defineConfig } from 'vite'
import htmlPublicPath from 'vite-plugin-html-public-path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
htmlPublicPath({
// it will be injected to head of script tag
initialPrefixScript: `
const prefix = window.__PREFIX__ = "/customPrefix";
return prefix;
`
})
],
})
with async
case, you can use await
in initialPrefixScript
import { defineConfig } from 'vite'
import htmlPublicPath from 'vite-plugin-html-public-path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
htmlPublicPath({
initialPrefixScript: `
const prefix = await new Promise((resolve) => {
setTimeout(() => {
resolve("/customPrefix");
}, 1000);
});
return prefix;
`
})
],
})
Options
initialPrefixScript
- type:
string
- default: ""
provide runtime code
to get the public path
of the application. It will be injected to head of script
tag. support async and await.