Avoid adding leading/trailing slash to base

[X-Y]

Clear and concise description of the problem

When specifying base value in vite.config.js, it is enforced that it starts and ends with a slash if the value is not a "valid" url:

vite/packages/vite/src/node/config.ts

Line 597 in 1cc2e2d

base = '/' + base

In our use case, there are multiple sites consuming the same app. We only build once, where there could use the base url would be a token(e.g. #{PUBLIC_PATH}#) which would be string-replaced for each site. But since Vite enforces a leading slash, I can't use a token at the beginning of the base value.

So originally, we would want #{PUBLIC_PATH}#/static/vendor.js -> https://mySite.com/static/vendor.js
But with slash enforcement, it becomes: /#{PUBLIC_PATH}#/static/vendor.js -> /https://mySite.com/static/vendor.js

Suggested solution

In my opinion there shouldn't be an enforcement here. It is up to the individual developer to decide if there should be a leading slash.

Alternative

As an alternative, I suggest adding a flag to the base value. So its type can be string | {value: string, enforceSlashes: boolean = true} and if enforceSlashes is set as false, then skip the slash enforcement.

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]

@X-Y would you try your project with this PR?

• feat!: relative base #7644

The idea is that instead of a base token that you later replace, you'll set the base to be relative (base: './') and Vite will generate a distribution that can be served from any base you choose after building as every path in the App is relative.

[X-Y]

@patak-dev If I understand correctly, with this feature I just need to set base: '' in vite.config.js, and any lazy loading would be automatically based on the url of the script that loads it? So if my main script is "https://mysite.com/assets/client.abcd.js", and the lazy loading module is "/assets/static/MyComp.dfgh.js", then it would automatically load from "https://mysite.com/assets/static/MyComp.dfgh.js"?

[patak-dev]

Yes, and it also will take care of assets paths, and public files paths. The PR was released in [email protected]
Would you try it out and report back?

[X-Y]

Seems to work for me! Not in ie11 though

[patak-dev]

Great! I'll close this issue then. For ie11 you'll need to add plugin-legacy. If that still doesn't work, please create a minimal reproduction with it and a new issue so we can check it out. Thanks!

[evan-lc]

@patak-dev Could something mentioned above like string | {value: string, enforceSlashes: boolean = true} be added? Relative base seems couldn't solve my problem. Because my base is a external url but not starts with http as my app is deployed in non-web target. Such as wk://host/path. Currently It becomes /wk://host/path after config resolved