【vite】多入口配置

一般的Vue项目，只有根目录一个index.html文件，这个文件就作为整个项目的入口。（因为Vue是单页面应用）

但是有的需求需要多个入口（比如使用微应用，子应用都是一个一个的单独的入口）。

项目（两个独立的模块一个是default，一个是login）目录如下：

配置vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

const path = require('path');
const root = path.resolve(__dirname, 'src');

export default defineConfig({
    plugins: [vue()],
    root,
    publicDir:'../public',
    build: {
        rollupOptions: {
            input: {
                default:'/pages/default/index.html',
                login:'/pages/login/index.html'
            },
        },
        outDir: '../dist'
    }
})

 如上需要在

build.rollupOptions.input里面配置先关的路径。

运行项目(npm run dev)：

 

 项目打包（npm run build）：