vue 多项目整合实践 - childlabor/blog GitHub Wiki

前言

数据看板和视频两个项目，视频在数据看板基础上开发。两项目通用部分占多数，如果分别开发，组件间同步修改维护困难（ctrl + c）。如果是不同人员独立开发，难度甚至 > 1+1。思考是否有优化方案？

备选：多入口 or git submodule

考虑到共用的不只是通用组件，还包括部分业务组件，因此多入口可能较为合适。

当然，后期抽离组件库，也可混合git submodule

思路

两个项目相似度高，公共部分多，如果能通过路由跳转区分项目，就能合并；

vue-router单页应用，无法做到两套路由并行；

如果多入口编译，不同入口对应不同路由就能实现。

实现

在现有项目基础上修改配置

多入口文件

// 多入口文件
└── src
    ├── router  路由
    ├── api AJAX请求
    ├── views 页面文件
        ├── common 公共
        ├── web  公众号
        └── video  视频
    └── entry 入口
        ├── web  公众号
          ├── main.js  入口文件
          └── settings.js 配置文件	
        └── video 视频

其余可共用，差异的也可通过文件夹区分

package.json

// package.json
npm script: {
	dev:web: cross-env VUE_APP_PLAT=web ... src/entry/web/main.js,
	dev:video: ...
}

// vue-cli3在客户端侧代码中使用环境变量
1. 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：
console.log(process.env.VUE_APP_SECRET)

2. BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径

vue.config.js

// vue.config.js
应用程序部署在子路径中，并指定子路径 publicPath
引入对应settings

router

// router增加base
base: /video/ || /web/,

// 对应publicPath 获取 web || video

request

// utils/request/index.js
const projectTarget = process.env.VUE_APP_PLAT;
const config = require(`@/entry/${projectTarget}/settings.js`);

// axios.js
const route = require(`@/router/${projectTarget}/index`);

src/api 和 src/store ...等视实际情况

约定

多个项目共同维护，要求样式、功能模块能通用，多个项目最好有统一的规划。
除子内容区域外，所有变更需要考虑多个项目，保持一致，特殊化处理的需事先注明，开发分离组件（会导致项目增大，尽量避免）。
独立构建和部署，nginx配置子路径。
项目文件夹区分合理规划，避免组件多了后杂乱难维护。
持续优化，缩减构建时间。
可扩展加入git submodule共用差异项目的共同组件库（独立开发组件库）。
代码仓库：单个？分支和tag管理；多个？每次push要兼顾，git remote set-url --add origin...同步多仓库

开发问题

多项目同时迭代时，如何做到代码及时同步，共用部分避免组件重复

约定一个统一的分支名，及时提交，写好commit，特别是涉及到公共组件修改、新增的

组件复用率

细化组价粒度...

样式修改

非统一修改的，一律scoped覆盖修改

组件修改影响消除

...组件接受传参优于在组件内部请求数据，引用store数据的需注意兼容

仓库

同步多个git远程仓库

// 合并2个 remote 配置 (origin为主)
$ git remote set-url --add [origin] ...

// 查看
$ git remote --verbose

// 提交 按正常步骤
...

// 删除合并
$ git remote set-url --delete [origin] ...