How to set vite config js base public path?

In Vite, the base URL is the base path of your application on the server. This is particularly important when handling resource paths in production environments. For example, if you want all resources to be loaded from a specific subpath, you can set the base.

To set the base in Vite, you need to modify or add the base option in the vite.config.js file located at the root of your project. Here is how to set the base path:

javascript
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  // Set the base path for the application
  base: '/my-sub-path/'
  // Other configurations...
});

In this example, if you want to deploy all resources to the /my-sub-path/ path on the server, Vite will automatically prepend the path specified by the base option to all resources during the build process.

Note that when working in a local development environment, base is typically set to the default value '/' because your resources are served from the root of the local server. However, when deploying to a production environment—especially if your application is not hosted at the root of the domain—setting base is crucial.

Additionally, the base path must start and end with a slash /.

If your resources are hosted on a specific CDN, you can also set base to a full URL:

javascript
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  // For example, using a CDN
  base: 'https://cdn.example.com/my-sub-path/'
  // Other configurations...
});

In this case, all resource links will be compiled with the specified CDN URL as a prefix, ensuring that production resources are correctly loaded from the CDN.