Relative links not handled properly in nested html files

[andylizi]

Describe the bug

Vite doesn't handle relative URLs when generating nested html files. Given the following file structure

`-- dist/
    |-- assets/
    |   |-- main.447a9352.js
    |   `-- nested.d75058e9.js
    |-- nested/
    |   `-- index.html
    `-- index.html

links in nested/index.html should be

<script type="module" crossorigin src="../assets/nested.d75058e9.js"></script>

but is

<script type="module" crossorigin src="assets/nested.d75058e9.js"></script>

Reproduction

1. npm init vite@latest using vanilla preset, npm install etc.
2. Copy index.html to nested/index.html.
3. Create a vite.config.js file, set the base to "" and follow the offical example for MPA:

import { resolve } from "path";

export default {
    base: "",
    build: {
        rollupOptions: {
            input: {
                main: resolve(__dirname, "index.html"),
                nested: resolve(__dirname, "nested/index.html")
            }
        }
    }
}

4. npm run build

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
    Memory: 6.07 GB / 15.70 GB
  Binaries:
    Node: 16.3.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.15.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.62)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    vite: ^2.4.4 => 2.4.4

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[dejour]

do not set base, then url will be absolute, and it will work.

[andylizi]

do not set base, then url will be absolute, and it will work.

Yeah, that can work as a workaround. Empty base is explicitly said to be valid in the docs through, as is the nested MPA use case, so it's still an issue.

[dejour]

empty base is not the same as the default value "/", and according to the docs, the nested MPA use case does not set base option which make its value default

[andylizi]

the nested MPA use case does not set base option which make its value default

The docs doesn't say base must be default for it to work either, and it doesn't make much sense for two seemly unrelated options to be conflicting - nested JS files handle relative URLs correctly, for example. The general assumption is that two features of the same program can coexist with each other, unless it's explicitly said otherwise. After all, what would be the point of a configuration if one can only copy-paste offical examples without changing anything?

[naufalfarras]

hi @dejour i also have this problem and i set the base to empty string because i need to upload dist folder to a subfolder inside a domain, so i cannot use absolute path, do you have any idea?

[andylizi]

Fixed by #7644.