【vite+vue3】一个项目包含多个小项目并实现多项目单独打包部署访问

1. projectA项目和projectB项目中均要保留index.html、main.ts/js 、App.vue 这三个文件可以直接复制粘贴src下的index.html、main.ts/js 、App.vue文件内容,需要注意的是main.ts路径引入的变化,以及路由的路径引入正确与否。公司有两个项目,UI界面以及框架是一致的,且有很多个公用的组件可以共同使用。所以想着在一个大的项目里实现两个小项目:projectA和projectB项目,公共部分提取出来。3. 配置package.json。
摘要由CSDN通过智能技术生成

下图最终打包效果如下:


描述:

公司有两个项目,UI界面以及框架是一致的,且有很多个公用的组件可以共同使用。所以想着在一个大的项目里实现两个小项目:projectA和projectB项目,公共部分提取出来。

例如项目文件结构如下:

├── package.json
├── vite.config.js
├── index.html // 可以删除
├── env.porjectA // 项目A的环境变量
├── env.porjectB // 项目B的环境变量
└── src
    ├── main.ts // 可以删除
    ├── App.vue //可以删除
    └── api // 公用的api
    └── config // 配置文件 例如servive.ts,config.ts
    └── components // 公用组件
    └── project
        └── projectA
            └── utils // 各自的具包
            |————api 
            |————router 
            |————views 
            |————index.html 
            |————main.ts
            |————App.vue  
        └── projectB 
            └── utils // 各自的具包
            |————api 
            &#x
  • 3
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值