Vite 中的多个入口点

我有一个带有 Webpack 的 Vue2 项目，我正在尝试从 Webpack 切换到 Vite。

In webpack.common.js，我有多个入口点：

module.exports = {
    entry: {
        appSchool: './resources/school/app.js',
        appStudent: './resources/student/app.js',
        appAuth: './resources/auth/app.js'
    },
    ...
}

我该如何写这个vite.config.js?

Vite 在底层使用 Rollup，您可以通过以下方式配置 Rollupbuild.rollupOptions https://vitejs.dev/config/#build-rollupoptions， 进而汇总的input option https://rollupjs.org/guide/en/#input:

// vite.config.js
import { fileURLToPath } from 'url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        appSchoool: fileURLToPath(new URL('./resources/school/index.html', import.meta.url)),
        appStudent: fileURLToPath(new URL('./resources/student/index.html', import.meta.url)),
        appAuth: fileURLToPath(new URL('./resources/auth/index.html', import.meta.url)),
      },
    },
  },
})

请注意入口点参考index.html文件，它们本身链接到app.js在其相应的目录中（例如，./resources/student/index.html包含<script src="./app.js">). The input配置还接受app.js直接文件，但不会生成 HTML。

demo https://stackblitz.com/edit/vue3-vite-multiple-entry-points?file=vite.config.js