CODEWITHSUNDEEP
vue.jsvite
Lirrr
Lirrr

Reputation: 547

Multiple entry points in Vite

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?

Upvotes: 36

Views: 59734

Answers (3)

lukejacksonn
lukejacksonn

Reputation: 485

A 2024 update as things have changed a bit since the last accepted answer was posted.. first of all with the latest version of vite you have to use import.meta.url and fileURLToPath to create file path in the input entries:

// vite.config.ts

import { fileURLToPath } from "url";

export default {
  build: {
    rollupOptions: {
      input: {
        ENTRY_POINT: fileURLToPath(new URL("./apps/ENTRY_POINT/index.html", import.meta.url))
      }
    }
  }
}

I wanted to do this dynamically based on the file system so ended up using glob and doing this:

// vite.config.ts

import { fileURLToPath } from "url";
import * as glob from "glob";

export default {
  build: {
    rollupOptions: {
      input: glob
        .sync(fileURLToPath(new URL("./apps/*/index.html", import.meta.url)))
        .reduce((acc, path) => {
          const name = path.match(/apps\/(.*)\/index.html/)![1];
          acc[name] = path;
          return acc;
        }, {} as Record<string, string>),
    },
  },
};

Hopefully that helps others going down this path!

Upvotes: 0

andreas
andreas

Reputation: 16936

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.

Upvotes: 6

tony19
tony19

Reputation: 138626

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

Upvotes: 61

Related Questions