基于vue-cli构建多模块并独立封装每个模块

如果我们在开发系统A的时候可以按模块生成多个静态资源包，那么最终的产品中就会有多个子目录，每个子目录都可以独立运行，完成一个业务功能。这样，如果任何系统需要我们开发的任何模块，我们都可以直接封装指定的模块，并灵活组装。

优点：

1.与其他系统灵活组装

2.各个模块互不影响，因此不受框架和开发模式的限制

3.不同的模块可以单独部署

4.后期维护风险小，可持续稳定维护

缺点：

1.每个模块都有独立的资源包，所以如果它们有相同的资源引用，它们就不能被重用

2.模块程序集依赖于iframe，因此浏览器安全设置、cookie共享和其他问题应该分别处理

3.用iframe包装组件。组件可以控制的范围是它所在的iframe。说到全屏应用场景，会比较麻烦

4.不同组件之间的通信很难实现目标

vue-cli默认打包方法的结果：

配置修改后生成的结果结构：

思路

由于我们当前的项目是多模块的，每个模块都应该有一个独立的条目，因此我们修改src目录结构如下：

注：原src下的main.js、index.html、app.vue无用，可以删除

那么模块中的目录结构如下图所示：

注意：

与原src下的main.js、index.html、app.vue相同，只是我们把main.js改成了index.js，至于模块中要用到的路由和状态管理，可以根据自己的需求进行配置。

以下是修改webpack配置的详细步骤

步骤1:添加build/module-conf.js来处理获取模块目录等问题。

步骤2:添加build/build-all.js来处理循环执行打包命令

第三步：修改build/build.js添加MODULE_ENV参数记录当前封装的模块名称，添加MODE_ENV参数记录当前封装的模式

第四步：修改config/index.js的配置，打包时修改导出目录、html入口模板、静态资源路径的配置

第五步：修改webpack.base.conf.js的门户配置，根据传递的参数动态配置门户文件

第六步：修改webpack.dev.conf.js的配置，在有多个门户的情况下增加webpackHtmlPlugin插件的配置，增加静态资源服务器的配置

第七步：修改webpack.prod.conf.js的配置，增加不同封装模式的处理。

第八步：修改package.json，添加npm run build-all指令，build指令，将所有模块打包在一个资源包下，每个模块的入口是module.html文件，静态资源在静态目录下。这样，重复的资源可以被重用。

npm运行构建

将指定的模块打包到资源包中。每个模块的入口是一个module.html文件，静态资源在静态目录中。这样，重复的资源可以被重用

npm运行构建模块名称1，模块名称2，

封装所有模块，然后每个模块相互独立。如果有几个模块，将生成几个静态资源包。这样，重复的资源将不会被重用

npm运行构建全部

摘要

以上是边肖介绍的一个基于vue-cli构建多模块并独立封装每个模块的项目。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！