一般的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):

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐