通过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 相关文章推荐
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
React如何避免重渲染
Apr 10 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
JS实现小米轮播图
2020/09/21 Javascript
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
中式婚礼主持词
2014/03/13 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
2014年环卫工作总结
2014/11/22 职场文书
保研导师推荐信
2015/03/25 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书