基于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 相关文章推荐
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
js自定义input文件上传样式
Oct 26 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
VFP与其他应用程序的集成
2006/10/09 PHP
PHP生成带有雪花背景的验证码
2006/10/09 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
Javascript实现的分页函数
2007/02/07 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python操作列表的常用方法分享
2014/02/13 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
生物学学生自我评价
2014/01/17 职场文书
护士辞职信模板
2014/01/20 职场文书
30年同学聚会感言
2014/01/30 职场文书
2015年话务员工作总结
2015/04/29 职场文书
秋收起义观后感
2015/06/11 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
Java实现学生管理系统(IO版)
2022/02/24 Java/Android