Support optional public base path configuration

[marrypen]

Clear and concise description of the problem

Based on the document,

JS-imported asset URLs, CSS url() references, and asset references in your .html files are all automatically adjusted to respect this option during build.

Vite handles all asset references automatically which means inject base path for all resources in .html files. I'm facing one situation which is that, in index.html some resource references are provided by other microservices but in same origin, these resource should not respect the base public path config. I didn't find a solution to solve this problem.

Suggested solution

Maybe base can provide a exclusion config or there is a flag we can use to mark these resources to not respect the base public path config.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[patak-dev]

Maybe the base param could accept a function to cover your use case. But I'm unsure if the extra complexity is justified. You could achieve this in user land with a plugin using transformIndexHtml.

Also you can check out a related the proposal at

• feat: experimental.buildAdvancedBaseOptions #8450

[marrypen]

Maybe the base param could accept a function to cover your use case. But I'm unsure if the extra complexity is justified. You could achieve this in user land with a plugin using transformIndexHtml.

Also you can check out a related the proposal at

• feat: build.advancedBaseOptions (+runtime base support) #8450

The transformIndexHtml hook is working, problem currently solved. But I have to hark code those resources in two different places which makes it difficult to maintenance in the future. Waiting for a more convenient solution.

[sapphi-red]

But I have to hark code those resources in two different places

One of the place is transformIndexHtml hook, what is the another place?

[marrypen]

First the reference should be placed in index.html, then in vite.config.ts I have to use transformIndexHtml to remove the base config path for those resource references.

[sapphi-red]

I see. How about doing it like this? (stackblitz)

import { defineConfig } from 'vite';

export default defineConfig({
  base: '/foo/',
  plugins: [
    {
      name: 'inject',
      transformIndexHtml() {
        return [
          {
            tag: 'script',
            attrs: { type: 'module', src: '/external.js', defer: true },
          },
        ];
      },
    },
  ],
});

[sapphi-red]

Closing due to lack of response.
Also I believe this is resolved by #8762.