基于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 相关文章推荐
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
浅谈react前后端同构渲染
Sep 20 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
微信小程序wx:for循环的实例详解
Oct 07 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
浅谈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数组使用规则分析
2015/02/27 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
关于旅游的活动方案
2014/08/15 职场文书
通知格式
2015/04/27 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
《叶问2》观后感
2015/06/15 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
Python字典的基础操作
2021/11/01 Python
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
python区块链实现简版工作量证明
2022/05/25 Python