To configure Vite so that plugins can run correctly outside the root directory, you need to set the base option in Vite's configuration file (vite.config.js). The base option tells Vite the base URL where your application will be deployed, and it's used to correctly resolve assets and URLs.

Here's how you can configure Vite to handle plugins correctly when the application is not deployed at the root directory:

  1. Create or locate your vite.config.js file at the root of your project.

  2. Inside the vite.config.js file, add the base option and set it to the relative path of your application from the domain root. For example, if your application is deployed at, you would set the base option to '/my-app/'.

// vite.config.js export default { base: '/my-app/', // Other Vite configuration options... };
  1. Make sure to adjust all your asset paths and URLs in your project to be relative to the new base URL. For example, if you have an image asset in your HTML or CSS like this:
<!-- HTML --> <img src="/assets/image.png" alt="My Image">


/* CSS */ background-image: url('/assets/image.png');

Update it to use the relative path instead:

<!-- HTML --> <img src="/my-app/assets/image.png" alt="My Image">


/* CSS */ background-image: url('/my-app/assets/image.png');
  1. Restart your Vite development server to apply the changes.

By setting the base option in the Vite configuration, Vite will correctly resolve assets and URLs relative to the specified base URL, allowing your plugins and application to run correctly even when deployed outside the root directory.

Have questions or queries?
Get in Touch