CODEWITHSUNDEEP
vite
norman
norman

Reputation: 1003

vite build always using static paths

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>

Upvotes: 74

Views: 46056

Answers (1)

tony19
tony19

Reputation: 138196

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

Upvotes: 154

Related Questions