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",
    
  },