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，你可以通过 build.rollupOptions, and then Rollup's input option:

配置 Rollup

// 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 文件，这些文件本身 link 到相应目录中的 app.js（例如，./resources/student/index.html 包含 <script src="./app.js"> ). input 配置也直接接受 app.js 文件，但不会生成 HTML。

demo

Vite 中的多个入口点

Multiple entry points in Vite

vue.js

vite