基于vue-cli搭建多模块且各模块独立打包的项目


Posted in Javascript onJune 12, 2019

如果我们在开发系统A时,能够按模块划分生成多份静态资源包,最终的成果物中,会有多个子目录,每个子目录可独立运行,完成一个业务功能。这样的话,我们有任何系统需要我们开发过的任何模块,都可以直接打包指定的模块,灵活组装。

优点:

1、可与其他系统灵活组装

2、各个模块相互不受影响,所以不受框架和开发模式的制约

 3、不同模块可以分开部署

4、后期维护风险小,可以持续的、稳定的进行维护

 缺点:

1、各个模块有相互独立的资源包,那么如果有相同的资源引用,不能复用

2、模块的组装要依赖iframe,所以要对浏览器安全设置、cookie共享等问题进行单独处理

3、用iframe来包裹组件,组件所能控制到的范围就是其所在的iframe,当涉及到全屏的应用场景时,会比较麻烦

4、不同组件之间的通信比较麻烦 实现目标

vue-cli默认打包方式的成果物:

基于vue-cli搭建多模块且各模块独立打包的项目

修改配置后生成的成果物结构:

基于vue-cli搭建多模块且各模块独立打包的项目 

思路

由于我们现在的项目是多模块的,每个模块都应该有独立的入口,所以我们修改src目录结构如下:

基于vue-cli搭建多模块且各模块独立打包的项目

注意:原来的src下的main.js、index.html和app.vue已经没用了,可以删掉

然后模块内的目录结构如下图所示:

基于vue-cli搭建多模块且各模块独立打包的项目

注意:

这里跟原来的src下的main.js、index.html和app.vue一样的,只不过我们把main.js改成了index.js而已。 至于模块内要使用路由、状态管理都可以根据自己的需求去配置了。

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

第一步:增加build/module-conf.js用来处理获取模块目录等问题

第二步:增加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指令 构建指令 打包全部模块到一个资源包下面,每个模块的入口是module.html文件,静态资源都在static目录中,这种方式可以复用重复的资源

npm run build

打包指定模块到一个资源包下面,每个模块的入口是module.html文件,静态资源都在static目录中,这种方式可以复用重复的资源

npm run build moduleName1,moduleName2,...

打包所有模块,然后每个模块彼此独立,有几个模块,就产生几个静态资源包,这种方式不会复用重复的资源

npm run build-all

总结

以上所述是小编给大家介绍的基于vue-cli搭建多模块且各模块独立打包的项目,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 #Javascript
vue安装遇到的5个报错及解决方法
Jun 12 #Javascript
深入学习JavaScript 高阶函数
Jun 11 #Javascript
javascript防抖函数debounce详解
Jun 11 #Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 #Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 #Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 #Javascript
You might like
php正则表达式(regar expression)
2011/09/10 PHP
php限制ip地址范围的方法
2015/03/31 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
js实现转动骰子模型
2019/10/24 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
Python字典遍历操作实例小结
2019/03/05 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
毕业生自我鉴定
2013/11/05 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
工作感言一句话
2015/08/01 职场文书
自考生自我评价
2019/06/21 职场文书