I have a simple project setup using Vite:
- index.html
- JavaScript file
- SASS file
I’m using Vite’s default configuration without a custom config file. After building the project, the index.html in the dist folder uses static paths for assets:
<head>
<script type="module" crossorigin src="/assets/index.b850bc1f.js"></script>
<link rel="stylesheet" href="/assets/index.04d1c13d.css">
</head>This also affects url() paths in CSS, converting them to static paths.
I want Vite to output relative paths instead, like this:
<head>
<script type="module" crossorigin src="assets/index.b850bc1f.js"></script>
<link rel="stylesheet" href="assets/index.04d1c13d.css">
</head>Solution:
The leading slash in the paths is the base URL, configured by the base option, which defaults to /. To use relative paths, set the base option to an empty string in your Vite config:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
base: '',
})This configuration makes the paths relative to the deployment directory, removing the leading slash.