Is there a __webpack_public_path__ equivalent in vite?

[Calvein]

A bit of context, I'm porting a large app built with webpack to vite, my app is setup so each builds are agnostics and can be used on dev/staging/production and my backend is providing the base html file while injecting some environment variables.
The assets generated at build are on a different domain that my actual app, https://assets.foo.com while my app is on https://foo.com.

My issue is that the path of the images are all starting with /, but I'd like them to use https://assets.foo.com/ instead, in webpack I could set __webpack_public_path__ which did the trick but I can't find a way to do it with vite.

Here's what I've tried:

• using <base href="https://assets.foo.com" /> won't because it'll change all my relative path, including links to different pages
• https://github.com/jy0529/vite-plugin-dynamic-publicpath didn't seem to do anything at all, for information my app is built with React & JS
• Using base is not possible since my build have to be agnostics

I could wrap my images in a function that add prefix them with my environment variable but I'm really not keen on having to do that.

Do you have any other ways to solve my problem ?

[runxc1]

Did you ever find an answer to this? I have the same situation going on

[dominicfraser]

Does this experimental option help?

https://main.vitejs.dev/guide/build.html#advanced-base-options

From #8450

[alinnert]

Thanks! It helped in my case. I use Vite to build the assets for a server rendered website and had problems with the path of imported assets. I will document it here in case someone else faces this problem:

I have the following folder structure:

project-root/
|- src/
|  |- index.ts
|  |- index.css (gets imported by index.ts)
|  `- image.jpg (gets imported by index.css)
`- htdocs (webroot)
   |- assets/ (Vite output directory)
   |  |- index-[hash].js (generated by Vite)
   |  |- index-[hash].css (generated by Vite)
   |  `- image-[hash].jpg (generated by Vite)
   `- index.php

Normally, Vite would import the image in your generated CSS file like this: url(/image-[hash].jpg). But here it should be url(/assets/image-[hash].jpg). This can be achieved with the following config:

export default defineConfig({
  build: {
    outDir: 'htdocs/assets',
    assetsDir: '', // Prevents Vite from creating another `assets` folder inside `outDir`.
    rollupOptions: {
      input: resolve(__dirname, 'src/index.ts')
    }
  },
  experimental: {
    renderBuiltUrl(filename) {
      return `/assets/${filename}`
    }
  }
})