Multiple entry points in Vite

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

Answer 2

In addition to tony19's answer, you can also just use resolve to generate the paths, makes the code a lot more readable:

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

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        appSchool: resolve(__dirname, 'resources/school/index.html'),
        appStudent: resolve(__dirname, 'resources/student/index.html'),
        appAuth: resolve(__dirname, 'resources/auth/index.html'),
      },
    },
  },
})

See the official docs for a multipage app.