TypeScript 中 Vite 怎么配置多页应用 MPA 独立打包入口-js教程-PHP中文网

vite多页应用（mpa）通过build.rollupoptions.input显式配置多个html入口实现独立打包，每个页面需有独立index.html及对应ts入口，资源自动隔离且开发时可直接访问各页面路径。

typescript 中 vite 怎么配置多页应用 mpa 独立打包入口

直接在 vite.config.ts 里通过 build.rollupOptions.input 指定多个 HTML 入口文件，就能实现 TypeScript 项目中 Vite 的多页应用（MPA）独立打包。关键不是写多个配置文件，而是让 Rollup 知道每个页面的起点在哪里。

明确每个页面的 HTML 入口路径

MPA 的核心是“每个页面一个 HTML 文件”。你需要把所有页面入口放在统一位置（比如根目录或 src/pages/），然后在配置中显式列出它们：

推荐结构：src/pages/home/index.html、src/pages/admin/index.html、src/pages/report/index.html
每个 index.html 内必须有唯一挂载点，如 <div id="app"></div>
对应 JS 入口（如 main.ts）应放在同级目录，由 HTML 中的 <script type="module" src="./main.ts"></script> 加载

在 vite.config.ts 中配置 input 映射

使用 resolve(__dirname, ...) 构建绝对路径，确保类型安全（TypeScript 友好）：

php版微信js-sdk支付接口类

下载

import { defineConfig } from 'vite';
import { resolve } from 'path';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        home: resolve(__dirname, 'src/pages/home/index.html'),
        admin: resolve(__dirname, 'src/pages/admin/index.html'),
        report: resolve(__dirname, 'src/pages/report/index.html')
      }
    }
  }
});

打包后，dist/ 下会生成 home/index.html、admin/index.html 等独立目录，资源自动隔离。

处理 TypeScript 类型与路径别名

如果用了 @/ 别名或组件自动导入，注意：这些插件默认基于项目根目录解析。当 HTML 入口分散在子目录时，需确保：

resolve.alias 配置使用 resolve(__dirname, ...) 而非相对路径，避免解析错误
像 unplugin-auto-import 或 unplugin-vue-components 的 dts 输出路径也用绝对路径，例如 dts: resolve(__dirname, 'types/auto-imports.d.ts')
若启用 root 选项（如设为 'src/pages'），会导致其他插件路径错位，一般不建议，优先靠 input 显式控制入口