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 方法或使用其他构建工具。
我有一个包含多个页面的 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 方法或使用其他构建工具。