dynamic publicPath support

Clear and concise description of the problem

I want to inject a dynamic publicPath(base in vite config),lick this:

export default defineConfig({
    base: `window.baseFromServer`
})

Suggested solution

provide some build hook, just like webpack’s hook, in this hook I can write a plugin to replace some string, reference:

https://github.com/m8ms/dynamic-public-path-webpack-plugin

Alternative

or support it in core

Additional context

none

[jy0529]

I created a plugin to do this, support preload’s link. https://github.com/jy0529/vite-plugin-dynamic-publicpath

// vite.config.ts

import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath'
export default defineConfig({
  plugins: [
    useDynamicPublicPath(/** option */),
  ]
})

// 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);
}

[danielroe]

The client-side state does need to match the HTML from the server, so that it continues to fetch assets from the correct locations as users navigate through the site. Once the JS is loaded, I am not imagining it will change or need to be reactive.

Here’s a stab at an API:

• emitted assets should use relative URLs where possible, as we can know this structure absolutely, as you say above. this is a relatively easy solution and can be implemented as a first step.

• ideally we should distinguish the built assets directory from the public directory as one containes hashed assets and the other doesn’t - and performance-conscious users might like to have different caching rules for public assets vs built assets

• therefore it should be possible to configure (once) a publicAssetsURL + buildAssetsURL (ideally functions that would take a string and return a url?). All asset strings that would be produced in the build process can simply use these values in a template literal - e.g.:

  // instead of
  const logo = './logo.svg'
  const someHTML = '<img src="./test.234k.svg">'
  // we generate
  const logo = publicAssetsURL('logo.svg')
  const someHTML = `<img src="${buildAssetsURL('test.234k.svg')}">`
  

  We might allow users to provide their own publicAssetsURL as follows:

  const publicAssetsURL = window.__vite_public_assets_url || (id) => '/' + id
  const buildAssetsURL = window.__vite_build_assets_url || (id) => '/assets/' + id
  

  Updating the URLs would be as simple as injecting a script tag into the HTML that sets those global functions and allows users to have full control depending on their own setups.