vite - 具有相对资产路径的子页面

vite - Subpage with relative asset path

我有一个包含多个页面的 Vue 项目,我在其中使用 rollupOptions.input 将它们指定为入口点:

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

最终的dist文件夹将部署在服务器的一个子目录中, 所以我然后将 base 属性设置为 base: "", 以使资产适用于主要 index.html 。这会将所有路径变成这样的相对路径:<link rel="stylesheet" href="assets/main.35431485.css">。适用于根 index.html 但对于子页面,链接看起来相同。然而,这不起作用,因为文件夹结构类似于:

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

因此,subpage1/assets/main.35431485.css 根本行不通。 有没有办法告诉 vite 相对路径到资产文件夹,即使是子页面? 理想情况下不要使用静态父目录(如 base: "/some/dir/"),而是保持所有相对目录?

这是一个已知问题,将 fixed in vite 3.0。 3.0 版本似乎还有很多问题,但希望它能在 2022 年的某个时候发布。目前唯一的方法是拥有静态基本路径、更改为某些 SPA 方法或使用其他构建工具。