Vue多项目共用组件&多项目合并一个项目中分开打包发布

背景

需求：pc端可以编辑保存在移动端上显示的界面，pc端上可以预览移动端上的显示。（上述pc端及移动端都是Vue项目）

这样看来，这个pc端预览界面及移动端上的显示，肯定是要用同一套组件了。

以前做过类似的项目是用iframe嵌套移动端界面实现的，但是后来非常后悔：1、数据传输是个问题，无论postmessage还是借助服务端，都非常麻烦。2、不灵活

现在打算做一套公用组件，给两端使用，但是又不想在git上维护3个项目（3个项目包括：pc，移动，共用组件），因此有了本文：Vue多项目共用组件，并且多项目整合到一个项目中分开维护打包发布。

注意！本文截图只整合了pc端及共用组件两个项目，移动端用的是uniapp还没整合过来

---

走这一步前先确认被整合的项目是能跑起来的！！

第一步：多项目整合到一个项目

目前只整合了pc端及共用组件两个项目

1、目录：

 

 子系统展开。共用组件在第二步介绍开发使用方式

2. 打包运行配置文件

在项目根目录下新建一个config目录，在新建一个projectsConfig.js文件，指定入口文件，端口号等

3. vue.config.js配置

4. pageage.json 配置子系统打包命令，运行命令

红框框处写项目名称，绿框框处可以自己定义执行指令名。

然后现在尝试执行这些指令，没报错就成功了，报错的话看情况解决吧孩砸~

---

第二步：写共用组件

1、main.js

这里我随便写的组件名叫abab。但建议各位规范命名，例如饿了么用el-开头，antd用a-开头。

2、pageage.json 设置模块的入口及名称等

名称name设置共用组件名，在第三步的时候用到

因为这个共用组件是公司内部使用，不发布到npm，所以 "private": true,

module设置共用组件入口文件

3、npm link

在package.json所在层级目录下执行npm link，把共用组件连接到全局。

---

第三步：pc端连接共用组件（移动端同理）

1、npm link 共用组件名

在pc端项目根目录执行npm link 共用组件名，由于pc端和共用组件在同一个项目，所以执行位置还是在package.json所在层级目录下

移除链接 npm unlink 共用组件名

2、pc端的main.js

import install from '共用组件名'
Vue.use(install);

3、pc端使用共用组件

搞定了可以用了啊包备！没报错就成功了，报错的话看情况解决吧孩砸~

---

参考文献：

https://blog.csdn.net/qq_35321405/article/details/102951883

https://blog.csdn.net/weixin_46773434/article/details/110880319

https://blog.csdn.net/sinat_28071063/article/details/105778699