通过vue-cli来学习修改Webpack多环境配置和发布问题


Posted in Javascript onDecember 22, 2017

Vue之所以现在如此之火热,一部分也得益于有官方的脚手架生成工具Vue-cli,大大简化了初学者环境搭建的成本,但是实际业务中我们往往需要实现其他的功能来对webpack进行改造,本文将会根据一些实际的业务需求,先学习vue-cli生成的模版,然后在进行相关修改。

Vue-cli生成模版文件目录

├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── Hello.vue
│ └── main.js
└── static

本文主要关注的点在

build - 编译任务的代码

config - webpack 的配置文件

package.json - 项目的基本信息

具体每一行webpack的配置的含义这里就不详细介绍了,请参考 vue2.0脚手架的webpack 配置文件分析

常见需求一:多环境配置和发布

Vue-cli生成的模版,只配置了npm run dev , npm run build 这行脚本,分别去启动开发环境服务和,执行打包。 而往往正常的公司开发流程最少都会有开发、测试仿真、生产环境,而每个环境响应的服务器请求地址,或者一些配置参数都会不同,并且发布的时候需要发布到多台服务器上,所以需要执行自动化脚本来进行。构建和发布。

我们首先得弄清楚这个问题,转载一段文章,作者:郑海波,链接,来源:知乎

这个其实和vue 无关,是一个通用问题:即代码在哪里构建。如果题主的服务器指的是运行服务器,那其实两种都不是好选择。很多新人包括我工作前都以为部署代码是这样的

通过vue-cli来学习修改Webpack多环境配置和发布问题

但实际上在较大的互联网公司会麻烦一些。以下介绍都是常见做法,并简化了一些流程,仅仅只是为了方便新人理解。代码提交到git或svn服务器注意这里是源文件,不是build后的文件

通过vue-cli来学习修改Webpack多环境配置和发布问题

2. 构建服务器会从git服务器中拉去要发布的代码版本在这里完成安装依赖,如题主的vue。并构建用于部署的文件,这些文件一般也会被压缩成一个压缩包用于管理

通过vue-cli来学习修改Webpack多环境配置和发布问题

3. 构建后的发布包会被上传到中转站:文件管理服务器集群

通过vue-cli来学习修改Webpack多环境配置和发布问题

4. 实际运行的服务器一般不会是单台,而是集群,这n台服务器会从文件服务器中拉去对应版本的相同压缩包,并解压最终运行

 通过vue-cli来学习修改Webpack多环境配置和发布问题

实际上,这里有明显的前后顺序的流程在里面,如果都是手动操作的话会非常麻烦,所以一般大公司里都会有一个自动部署平台来全局统筹完成这些工作,作为开发者其实只需要点下『一键部署』就完成以上内容了

通过vue-cli来学习修改Webpack多环境配置和发布问题

如在配合gitlab、github这类提供的webhook自动通知自动部署平台,稳定版本的代码已经完成推送了(Push Event)。那我们就连点一下按钮都不需要了。这是个典型的构建部署分离的Case,带来的好处非常多,比如确保构建的是一份代码,避免多环境构建导致不一致的可能性构建一般是个高开销的行为,可能会引起运行服务器的不稳定可以快速回滚或回复,相同版本的代码无需重构构建。。。

讲了这么多所以,打包构建并不是一个简单的事情,所以需要自动化工具来配置,已有的成熟的方案就是docker 构建一个应用容器引擎来构建,发布等。不过这块我也不熟悉,有会的同学可以进行分享。

总结

以上所述是小编给大家介绍的Webpack多环境配置和发布问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木的支持!

Javascript 相关文章推荐
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
详解Axios 如何取消已发送的请求
Oct 20 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 #Javascript
Webpack框架核心概念(知识点整理)
Dec 22 #Javascript
详解webpack+express多页站点开发
Dec 22 #Javascript
如何开发出更好的JavaScript模块
Dec 22 #Javascript
详解webpack提取第三方库的正确姿势
Dec 22 #Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 #Javascript
JavaScript伪数组用法实例分析
Dec 22 #Javascript
You might like
PHP的FTP学习(四)
2006/10/09 PHP
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
Python 字典(Dictionary)操作详解
2014/03/11 Python
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
python 实现音频叠加的示例
2020/10/29 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
Ajax的优点和缺点
2014/11/21 面试题
初中学生评语大全
2014/04/24 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
2014年党小组工作总结
2014/12/20 职场文书
2015年求职自荐信范文
2015/03/04 职场文书