vite-plugin-dynamic-publicpath
Why
Use dynamic import handler to change runtime public base path, like webpack's __webpack_public_path__.
Usage
- run
yarn add vite-plugin-dynamic-publicpath --dev - add the plugin into
vite.config.ts
// vite.config.ts
import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath'
export default defineConfig({
plugins: [
useDynamicPublicPath(/** option */),
]
})e.g. basic demo
// main.ts
// Your dynamic cdn
const dynamicCdn = oneOf(['cdn.xxx.com', 'cdn1.xxx.com']);
window.__dynamicImportHandler__ = function(importer) {
return dynamicCdn + importer;
}
window.__dynamicImportPreload__ = function(preloads) {
return preloads.map(preload => dynamicCdn + preload);
}For legacy browser
e.g. legacy browser demo
// vite.config.ts
import legacy from '@vitejs/plugin-legacy'
import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath'
export default defineConfig({
plugins: [
/**
* @see https://github.com/vitejs/vite/tree/main/packages/plugin-legacy
* /
legacy({
targets: ['defaults', 'not ie <= 8']
}),
/** Attention! The legacy plugin must before loaded than dynamic-publicpath plugin */
useDynamicPublicPath({
dynamicImportHandler: 'window.__dynamic_handler__',
dynamicImportPreload: 'window.__dynamic_preload__'
}),
]
})Options
dynamicImportHandler
Type: string
Default: window.__dynamicImportHandler__
Register dynamic import handler
dynamicImportPreload
Type: string
Default: window.__dynamicImportPreload__
Register dynamic import preload handler
assetsBase
Type: string
Default: assets
Custom the assets directory.