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
?
CodePudding user response:
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.