Vite 中的多个入口点

Question

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

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

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

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

Answer 1

Vite 在底层使用了 Rollup，你可以通过配置 Rollup build.rollupOptions，然后配置Rollup 的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.htmlcontains <script src="./app.js">）。该input配置也直接接受该app.js文件，但不会生成 HTML。

演示