Base URL

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 to* (the Base URL is /) we can change the Base URL to /some/base/url/ and deploy it to* instead.

To change the Base URL we:

  1. Set vite.config.js#base.
    // vite.config.js
    export default {
      base: '/some/base/url/'
  2. Use import.meta.env.BASE_URL to construct a <Link> component that prepends the Base URL. Example: /examples/base-url/components/Link.jsx.
  3. Use import.meta.env.BASE_URL for referencing static assets living in public/. Example: /examples/base-url/renderer/

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: ''

If vite.config.js#base is an absolute URL (a URL that starts with http:// or https://), then vite-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/.

See also