前言

经常看到有些伙伴问，多工程如何共享一套组件库，而且组件库本身还允许多人维护。

于是有人就说了，把组件库维护成NPM包，但显然，很繁琐。

又有人说了，用webpack5 Module Federation，但是这玩意又是学习成本，也不够简单。

其实并不需要那么复杂，我今天提供一套方案。

思路

首先说，组件库的引入，是可以跨盘符引入的，也就是import HelloWorld from 'H:/sharedComponents/HelloWorld';是可用的。

现在简单了，无论你组件库放在哪里，直接引用它就完事了。

那么有个问题就是，甲同事的组件库放在H:/sharedComponents，乙同学放在D:/codes/sharedComponents，那么import的路径就无法保证统一，怎么办呢？

也简单，每个人维护自己的.env.local环境配置文件即可。

实施

1. 给一个Vue项目创建.env文件，写入：

VUE_APP_SHARED_COMPONENTS_PATH = 'D:/sharedComponents'

2. 再创建.env.local文件，写入：

VUE_APP_SHARED_COMPONENTS_PATH = 'D:/codes/sharedComponents'

这样，默认存放路径是D盘下的sharedComponents目录，如果你创建了.env.local，则.env.local优先级高，最后得到的路径是'D:/codes/sharedComponents'。.env.local会被git忽略，不会提交到的仓库。

3. 给Vue项目写一个全局常量文件@/utils/const.js，内容比如：

export default {
    sharedComponentsPath: process.env.VUE_APP_SHARED_COMPONENTS_PATH,
}

4. 修改import语句

原来是：

import HelloWorld from 'H:/sharedComponents/HelloWorld';

现在改成：

import { sharedComponentsPath } from '@/utils/const';
import HelloWorld from sharedComponentsPath + '/HelloWorld';

5. 给其他Vue项目也做同样的操作。

维护组件库

组件库存入独立的git仓库即可，没什么可说的。

对组件库的修改可以在Vue项目直接看到效果，跟存放在项目目录没任何差异。

最后提醒一下，你要确保修改组件之后，对所有项目的兼容性，如果有破坏性的修改，需要把引用它的所有项目都对应改正。

那么如何知道哪些项目的哪些文件引用了我改的组件呢？方法有很多，简单的，比如在几个项目中搜索sharedComponentsPath + '/HelloWorld'。