Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Invalid relative path in index.html when building with base option empty in Windows #17584

Open
7 tasks done
mortalis13 opened this issue Jun 28, 2024 · 2 comments
Open
7 tasks done

Invalid relative path in index.html when building with base option empty in Windows #17584

mortalis13 opened this issue Jun 28, 2024 · 2 comments
Labels
pending triage

Comments

@mortalis13
Copy link

mortalis13 commented Jun 28, 2024 •
edited
Loading

Describe the bug

(Sorry if this was asked/answered before, just cannot find information on this topic)
When building a simple project, I get dist/index.html file with relative paths using parent directories navigation (double dots). It looks like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="../../../vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script type="module" crossorigin src="../../../assets/index-BXSNOGaM.js"></script>
    <link rel="stylesheet" crossorigin href="../../../assets/index-BfibREyH.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Seems to be happening when navigating to a subdirectory of the main drive C: from the default Windows terminal, cmd and building the project from there. (see the reproduction steps)
The vite.config has the option base: '' or base: './'.

What is expected is the relative paths with only the initial dot, like

<link rel="icon" type="image/svg+xml" href="./vite.svg" />
...
<script type="module" crossorigin src="./assets/index-BXSNOGaM.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BfibREyH.css">

This expected result seems to be achieved when creating a project in the C: drive directly with npm create vue@latest.
The problem seems to be related to the method of reaching the target directory, though not sure about the exact explanation.
I'd say if you go with cmd.exe /k cd [path] the index.html ends with parent folders paths and if you enter into directories one by one, the relative paths start with ./.

Again, sorry for duplication, surely it happened to someone else, but I just cannot formulate the search request in Google or here in Issues to find an adequate solution. Or if it's not vite related, if you point me to the possible solution it would be greatly appreciated.

Reproduction

https://stackblitz.com/edit/vitejs-vite-dnt7jk

Steps to reproduce

  • download the project
  • unpack it to C:\a folder
  • open Run dialog (Win+R) and execute cmd /k cd c:\a
  • in the opened terminal run npm install & npm run build
  • open dist/index.html in a text editor and see the relative paths contain parent folders navigation (../)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 11.50 GB / 23.76 GB
Binaries:
    Node: 20.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - c:\Users\user\AppData\Roaming\npm\yarn.CMD
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
    Edge: Chromium (124.0.2478.51)
    Internet Explorer: 11.0.19041.4355

Used Package Manager

npm

Logs

No response

Validations
@stackblitz StackBlitz
Copy link

stackblitz bot commented Jun 28, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@xiety
Copy link

xiety commented Jun 30, 2024

I have a project in d:\project and after build I get ../../../proje/assets/ in html. Note that two characters are truncated from the folder name.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
pending triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@xiety @mortalis13