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

背景

需求:pc端可以编辑保存在移动端上显示的界面,pc端上可以预览移动端上的显示。(上述pc端及移动端都是Vue项目)

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

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

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

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


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

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

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

1、目录:

 Vue多项目共用组件&多项目合并一个项目中分开打包发布_第1张图片

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

Vue多项目共用组件&多项目合并一个项目中分开打包发布_第2张图片

2. 打包运行配置文件

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

Vue多项目共用组件&多项目合并一个项目中分开打包发布_第3张图片

3. vue.config.js配置

Vue多项目共用组件&多项目合并一个项目中分开打包发布_第4张图片

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

Vue多项目共用组件&多项目合并一个项目中分开打包发布_第5张图片

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

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


第二步:写共用组件

1、main.js

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

Vue多项目共用组件&多项目合并一个项目中分开打包发布_第6张图片

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

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

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

module设置共用组件入口文件

Vue多项目共用组件&多项目合并一个项目中分开打包发布_第7张图片

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

你可能感兴趣的:(vue,vue-cli3)