'vite - Subpage with relative asset path

I have a Vue project with multiple pages where I use rollupOptions.input to specify them as entry points:

rollupOptions: {
    input: {
        main: resolve(__dirname, "index.html"),
        subpage1: resolve(__dirname, "subpage1/index.html"),
        subpage2: resolve(__dirname, "subpage2/index.html")
    }
},

The final dist folder will be deployed at a subdirectory in a server, so I then set a base attribute as base: "", to make the assets work for the main index.html . This turns all the paths into something relative like this: <link rel="stylesheet" href="assets/main.35431485.css">. Works for the root index.html but for the subpages, the links look identical. This however doesn't work, because the folder structure is something like:

├── index.html
├── assets
    ├── main.35431485.css
    └── ...
└── subpage1
    └── index.html

As such, subpage1/assets/main.35431485.css will simply not work. Is there a way to tell vite to relatively path its way to the asset folder, even for subpages? Ideally not using a static parent directory (like with base: "/some/dir/"), but keeping it all relative?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source