Vite多页面应用简单构建
1、单个工程实现多页面构建
来自于官网
构建生产版本 | Vite 官方中文文档 (vitejs.dev)
假设你有下面这样的项目文件结构
├── package.json
├── vite.config.js
├── index.html
├── main.js
└── nested
├── index.html
└── nested.js
在开发过程中，简单地导航或链接到 /nested/ - 将会按预期工作，与正常的静态文件服务器表现一致。
在构建过程中，你只需指定多个 .html 文件作为入口点即可：
js
// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
nested: resolve(__dirname, 'nested/index.html'),
},
},
},
})
如果你指定了另一个根目录，请记住，在解析输入路径时，__dirname 的值将仍然是 vite.config.js 文件所在的目录。因此，你需要把对应入口文件的 root 的路径添加到 resolve 的参数中。
请注意，在 HTML 文件中，Vite 忽略了 rollupOptions.input 对象中给定的入口名称，而是在生成 dist 文件夹中的 HTML 资源文件时，使用了文件已解析的路径 ID。这确保了与开发服务器的工作方式保持一致的结构。
参考
vue3-ts-vite：vue 项目 配置 多页面应用_vue3多页面应用_snowball_li的博客-CSDN博客
2、在打包时指定（适用于多项目合并）
base
- 类型：
string - 默认：
/
开发或生产环境服务的公共基础路径。合法的值包括以下几种：
- 绝对 URL 路径名，例如
/foo/ - 完整的 URL，例如
https://foo.com/ - 空字符串或
./（用于嵌入形式的开发）
参考 共享配置 | Vite 官方中文文档 (vitejs.dev)
效果 http://localhost:4173/mybase/
在配合build属性。就可生成到指定位置，方便后续不同项目维护管理
build :{
outDir: "mybase/",
assetsDir: "asserts",
},