Support server.origin for references in HTML files #18457
Description
Description
The Vite Shared Options documentation for base states:
Full URL, e.g. https://bar.com/foo/ (The origin part won't be used in development so the value is the same as /foo/)
This has turned out to be a problem for me because I serve HTML generated by a Vite SSR server from a server in front of the Vite dev server. In short, a server at http://127.0.0.1:8000 requests HTML from Vite running at http://127.0.0.1:5173/, and the fronting server returns the HTML it got from Vite to the browser. At this point, all URLs in the HTML are relative to http://127.0.0.1:8000, instead of being relative to http://127.0.0.1:5173/, so all static assets on the page fail to load.
If Vite had allowed me to set the base URL to http://127.0.0.1:5173/, the static assets on the page would have correctly referred to http://127.0.0.1:5173/ and everything would have worked, even though I serve the HTML from a different origin.
Suggested solution
Please make it so that Vite respects the origin part of base in development, like it does in production.
Alternative
I currently work around the problem using a Vite plugin that rewrites the Vite generated HTML, introducing the origin in front of the stripped down base path (STATIC_URL here is /static/ and it's also the value that was passed to Vite as base):
base: 'http://127.0.0.1:5137/static/',
plugins: [
vue(),
// Rewrite static URLs to use the dev server's origin hostname.
// Fixes static URLs in index.html.
{
name: 'static-url-origin',
transformIndexHtml(html: string) {
return html.replaceAll('/static/', 'http://127.0.0.1:5137/static/')
},
},
],
// Rewrite static URLs to use the dev server's origin hostname.
// Fixes public and module URLs in component <template>.
// Fixes module URLs in component <style>.
// Fixes module URLs in index.css.
// Does not fix public URLs in component <style>.
// Does not fix public URLs in index.css.
server: {origin: 'http://127.0.0.1:5137/static/'},Additionally, I set server.origin to http://127.0.0.1:5137/static/ to introduce the origin into assets that are included by my Vue components. This fixes the origin for both public and module based assets (i.e. assets from ./src/assets/) referenced from a Vue <template> block. It also fixes module based assets referenced from the component's <style> block.
However, it does not fix public assets referenced from the component's <style> block.
Similarly, it fixes module based assets referenced from index.css, but it does not fix public assets referenced from index.css.
Fortunately, I’m able to work around those last two problems with public assets from <style> and index.css not working by configuring the server in front of Vite to serve static assets from Vite’s public dir.
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.