关于vue多项目一体的解决方案的讨论 - 初始篇[架构篇]

一、背景

背景：现阶段很多公司都会做各种各样的活动，以及一个项目部需要做多个项目，但是这里就会存在一些问题。
- 项目过多，分散在不同git上，随着项目过多，每次查找搜索都会很麻烦
- 各项目大小不同，如果都做在打包在一个项目里面，随着迭代项目会越来越大
- 组件之间的公用，只能从一个项目复制到另外一个项目
- 每次都需要创建新的项目，插件也需要重新安装，或者去旧的复制
- 如果开发人员较多的情况，不同的项目会有不同的风格以及插件
- 插件升级，需要一个一个去升级
- …类似的问题会越来越多

二、解决方案

首先说一下‘微前端的概念’：
微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。
基于上述的概念，我会手把手的搭建2套可用的完整vue的企业前端架构。
- 方案一： 基于vue2，vue-router，vuex，vant , vuese , eslint , amfe-flexible ,axios 等构建的框架
- 方案二 ： 基于pnpm + vue3 +vite + ts +pina +eslint 所实现的 momorepo 方案

两者的目的都是一致的，为了解决多项目维护，开发升级的问题。

基于vue2的方案一 （博主自己已经搭建使用过，有兴趣可以使用vue3按照这个思路搭建一套）

目标： 实现多项目依赖一体，构建公共的组件库，样式，插件等；但业务代码运行，打包隔离，互不干扰，减少因为某一部分子项目的问题，导致全部模块出问题。
适用的场景：项目零散，要求打包体积较小，或者项目需要各个模块进行单独隔离，业务和打包都隔离的情况。

基于vue3的方案

目标：实现多项目集成，代码统一，减少重复依赖项，可构建公共的组件库，样式，业务都进行隔离，互补干扰，跨项目开发。
适用的场景：项目较大，需要各单独隔离，业务和打包都隔离，或者多个相似项目需要统一管理。

三、架构的思考

搭建一个完整的前端架构我们需要考虑那些方面，然后再去入手搭建。（属于个人思考，遗漏部分后面的篇幅过程中再加上）

基础

一个项目至少需要能跑起来，以及能访问到响应的接口
- 基础cli项目创建
- 路由的设置和封装
- 请求的设置和封装
- 打包的入口文件以及出口文件

公共

我这里把公共分为组件，方法，样式
- 公共的项目组件库，以及组件文档
- 公众的指令，过滤器等
- 公共的样式，以及公共的方法

配置

项目的配置包括各个方面
- 环境变量 ，包括不同环境的css 以及参数，代理等等（如果需要多项目一体就需要进行参数的提取，建立专属的配置文件，进行配置）
- 建立静态文件夹，区分一些不用打包的资源
- 代码的压缩打包
- 不同环境的调试代码删除
- 图片的处理
- 代码的规范检查
- 等等 ，后面具体的时候再补充

测试部分

项目集成测试（这个不讨论，一般根据公司情况自己增加）

本章为架构篇的第一篇，主要是思考项目搭建前的一些目标。接下来会先从方案一开始，一步一步进行项目的搭建和规划。