Relative Path in Generated index.html

[miswanting]

No matter which one I choose below:

<script type="module" src="./index.ts"></script>

<script type="module" src="/index.ts"></script>

<script type="module" src="index.ts"></script>

The generated result will always be like this:

<script type="module" crossorigin src="/assets/index.a3377d47.js"></script>
<link rel="modulepreload" href="/assets/vendor.98ac8201.js">
<link rel="stylesheet" href="/assets/index.163c7cae.css">

What I really want is:

<script type="module" crossorigin src="assets/index.a3377d47.js"></script>
<link rel="modulepreload" href="assets/vendor.98ac8201.js">
<link rel="stylesheet" href="assets/index.163c7cae.css">

or

<script type="module" crossorigin src="./assets/index.a3377d47.js"></script>
<link rel="modulepreload" href="./assets/vendor.98ac8201.js">
<link rel="stylesheet" href="./assets/index.163c7cae.css">

I'm asking this because it really matters when used in Electron.
Is there any Official ways to do that? I couldn't find any answer in the doc.
Thanks for help!

[fmstuff]

How I solved it for my project:

in your vite.config.js you can specify a base field (which defaults to /), and set it to e.g. ./ to produce relative links to assets in your index.html.

Configuring it like this in your vite.config.js should solve your problem:

import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  // your other configuration...
});

See also the Vixe docs for more details: https://vitejs.dev/config/#base

[saman-waruka]

Cool & worked solution. 🙏