vite

Question

我有一个包含多个页面的 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/"），而是保持所有相对目录？

Answer 1

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

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

vite - Subpage with relative asset path

vue.js

relative-path