基于 vue-cli 4 实现，vue 多模块、vue多项目集成工程

Github项目地址 : https://github.com/zhanghenxiao/webpack_multi_project

目标：多模块集成的vue项目，多项目共用一份配置，可以互相依赖，也可以独立打包部署

使用业务场景

1.如果项目可能有对应多个不同UI界面;对于这样的场景你可能首先会想到，用样式主题就可以实现，基本的样式或者换肤是可以通过样式实现。但如果要实现更复杂的，比如不同两套UI的界面可能功能显示及样式都有差别，那就不得不单独拆成一个项目，但是这样又会造成每个项目很多冗余代码。

2.如果项目有多个子模块(同时子模块之间又存在互相依赖关系)；对于这样的场景是可以把项目独立发布到npm仓库，但是这样又涉及到每个模块都需要独立编译好再发布，实际过程有显得有些繁琐（实际视情况而定）。

对于以上场景可以使用一个项目管理多个子模块也是一个不错的选择。

多页面和多模块区别

多页面：多页面是指一个项目有多个入口，打包是会生成多个html文件，实际开发过程中都是混合在一个项目中开发；

多模块：是指不同的业务模块可以进行拆分；各自独立运行、也可以互相引用，这一点和通过 npm 发布是类似的；对于一些项目本身不允许发布的情况下，既可以独立开发，又不需要发布到共有仓库（当然也可以通过建立私有仓库解决哈）

问题:

1,如何划分子模块； 2,如何分离可复用组件； 3,如何独立编译，每个子模块独立打包编译、运行；

优点

1,高复用性 2,统一管理依赖库 3,不同模块使用的依赖各自按需打包 4,模块之间相互独立运行、编译、打包 5,模块之间可以直接互相引用，不需要iframe（一般方式是通过iframe嵌入，这样的性能相当差）

 

一：开始创建项目

先用vue-lic创建个demo项目：

 vue init webpack vue-multi-module

先看看创建成功的项目目录：

 创建完后先跑起来看看：

 npm run dev

二：添加多项目模块

 

最后最重要的webpack 配置！！！

效果图

运行 npm run dev:project1

 

运行 npm run dev:project2

 

 

Github项目地址 : https://github.com/zhanghenxiao/webpack_multi_project