4个Vue项目，本地共用同一套组件库

我是个人开发者，一个人在开发很多个产品。如下是我目前维护的VUE项目有4个，相比较公司高大上的架构设计和严谨的项目管理，个人开发追求的就是简单高效。

本片文章讲下我是如何在4个Vue项目之间，本地化共用自定义组件。  自定义组件包括登录注册页面、支付页面(支付宝+stripe)、小的共用utils(按钮，logo)等等。    

websread，网页阅读器https://websread.com

onetools，桌面端工具集https://onetools.vip

we4221，我们的马拉松https://we4221.com
复盘神器，dviewdiewhttps://dviewdview.com

遇到的问题

1 效率低下：我不太可能每个项目都去copy需要的vue文件，随后项目变多，copy成本随之变大。

2 维护成本：遇到共用的组件需要维护更新逻辑，不太可能每个项目都去更新一遍文件。

参考网上一些资料，加上亲自实验成功。

我通过在项目同层级新建一个共用的项目，把共用的组件都塞入到这个项目里，来解决这个问题的。分享如下

解决方案

1 在同层级，新建共用组件项目plug_libs。我是通过vite来新建vue项目的。图中黄色标注是要设置的内容，下面会讲到。

2 plug_libs-src-index.ts文件中导出需要共用的组件，开放给其他项目使用

plug_libs-package.json文件，正常安装公共组件库需要的依赖即可。

3 在其他项目(例如websread.com)里，需要安装本地共享组件库。

cd ./websread.com
npm install ../plug_libs

这样，本地组件库就被安装到应用项目的packjson.json配置中了

4 此时，已经可以在其他项目 (例如websread.com)引用公共组件了

5 如果编辑器有引用的报错提示，我是在tsconfig.app.json配置文件里加了这句引用。

总结

关于vue项目引用公共组件，网上教程最多的是推荐发布到npm，再npm install安装；

但我个人觉得稍稍复杂，个人开发者精力有限。这种本地化引用的方式，更适合我的现状。

码字不易，欢迎评论区点赞交流。

-----------

后面准备把我是如何从产品转开发，到现在成为六边形战士的经验分享一下。感谢关注！