42

I have a simple setup with an index.html, some js file and a sass file, building it with vite. I am using vite defaults without a config file.

After running a build the index.html in the dist folder references everything as static paths:

<head>
  <script type="module" crossorigin src="/assets/index.b850bc1f.js"></script>
  <link rel="stylesheet" href="/assets/index.04d1c13d.css">
</head>

The same happens to url() paths in css: They are turned into static paths as well. My question is: Is there a configuration option to make vite output relative paths, so:

<head>
  <script type="module" crossorigin src="assets/index.b850bc1f.js"></script>
  <link rel="stylesheet" href="assets/index.04d1c13d.css">
</head>
tony19
  • 125,647
  • 18
  • 229
  • 307
norman
  • 599
  • 1
  • 5
  • 14

1 Answers1

89

This leading path is the base URL, configured by the base option, which is / by default.

You can remove the base URL by setting base to an empty string, making the path relative to its deployment directory:

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

export default defineConfig({
  base: '', 
})

demo

tony19
  • 125,647
  • 18
  • 229
  • 307
  • 6
    Perfect! `base: './'` works, too! I like to be explicit about relative paths and it also suggests what base is for to my future devs and myself (in case I need to CTRL-F). – JoePC Mar 24 '23 at 15:42
  • For me, the static path don`t change. – Sandro Santos Jul 25 '23 at 01:10