vite - Subpage with relative asset path

Viewed 760

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?

1 Answers

This is a known issue that will be fixed in vite 3.0. There seems to be a fair amount of issues left for the 3.0 release but hopefully it will be released sometime in 2022. Right now the only way is to have a static base path, changing to some SPA approach, or using another build tool.

Edit: vite 3.0 is now released and relative base path is now properly supported. See the docs here.

Related