基于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实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
Python进阶-函数默认参数(详解)
2017/05/18 Python
python 删除非空文件夹的实例
2018/04/26 Python
Sanic框架应用部署方法详解
2018/07/18 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
python中doctest库实例用法
2020/12/31 Python
python生成word合同的实例方法
2021/01/12 Python
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
大一期末自我鉴定
2013/12/13 职场文书
自我评价的写作规则
2014/01/06 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书