Vite 中文文档

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

  1. ``` ts
  2. // vite.config.ts

  4. import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath'
  5. export default defineConfig({
  6.   plugins: [
  7.     useDynamicPublicPath(/** option */),
  8.   ]
  9. })
  10. ```

e.g. basic demo

  1. ``` ts
  2. // main.ts

  4. // Your dynamic cdn
  5. const dynamicCdn = oneOf(['cdn.xxx.com', 'cdn1.xxx.com']);
  6. window.__dynamicImportHandler__ = function(importer) {
  7.     return dynamicCdn + importer;
  8. }
  9. window.__dynamicImportPreload__ = function(preloads) {
  10.     return preloads.map(preload => dynamicCdn + preload);
  11. }
  12. ```

For legacy browser


e.g. legacy browser demo

  1. ``` ts
  2. // vite.config.ts

  4. import legacy from '@vitejs/plugin-legacy'
  5. import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath'
  6. export default defineConfig({
  7.   plugins: [
  8.     /**
  9.      * @see https://github.com/vitejs/vite/tree/main/packages/plugin-legacy
  10.      * /
  11.     legacy({
  12.       targets: ['defaults', 'not ie <= 8']
  13.     }),
  14.     /** Attention! The legacy plugin must before loaded than dynamic-publicpath plugin */
  15.     useDynamicPublicPath({
  16.       dynamicImportHandler: 'window.__dynamic_handler__',
  17.       dynamicImportPreload: 'window.__dynamic_preload__'
  18.     }),
  19.   ]
  20. })
  21. ```

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.