通过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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
JS上传前预览图片实例
Mar 25 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
微信小程序实现animation动画
Jan 26 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
电大物流学生的自我评价
2013/10/25 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
《灰雀》教学反思
2016/02/19 职场文书