What is the Base URL? Changing the Base URL (aka "Public Base Path") is about changing the URL pathname root from
/
to/some/base/url/
: for example, instead of deploying our app tohttps://example.org/*
(the Base URL is/
) we can change the Base URL to/some/base/url/
and deploy it tohttps://example.org/some/base/url/*
instead.
To change the Base URL we:
vite.config.js#base
.
// vite.config.js
export default {
base: '/some/base/url/'
}
import.meta.env.BASE_URL
to construct a <Link>
component that prepends the Base URL. Example: /examples/base-url/components/Link.jsx.import.meta.env.BASE_URL
for referencing static assets living in public/
. Example: /examples/base-url/renderer/_default.page.server.jsx.Example: /examples/base-url/.
If we want to deploy our static assets to a CDN, then we set the vite.config.js#base
value to the assets' CDN URL root.
// vite.config.js
export default {
base: 'https://cdn.example.org/my-website-assets/'
}
If
vite.config.js#base
is an absolute URL (a URL that starts withhttp://
orhttps://
), thenvite-plugin-ssr
applies the Base URL only to our assets (and not to our page URLs). Because using a CDN means that we server-side render our pages on a separate sever with a different URL.
Example: /examples/base-url-cdn/.