Multiple entry points in Vite - vue.js

Question

I have a Vue2 project with Webpack, and I'm trying to switch from Webpack to Vite.
In webpack.common.js, I have multiple entry points:
module.exports = {
entry: {
appSchool: './resources/school/app.js',
appStudent: './resources/student/app.js',
appAuth: './resources/auth/app.js'
},
...
}
How do I write this in vite.config.js?

Answer 1

Vite uses Rollup under the hood, and you can configure Rollup through build.rollupOptions, and then Rollup's input option:
// 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)),
},
},
},
})
Note the entry points refer to index.html files, which themselves link to the app.js in their corresponding directories (e.g., ./resources/student/index.html contains <script src="./app.js">). The input config also accepts the app.js file directly, but no HTML would be generated.
demo