通过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 相关文章推荐
Javascript 面向对象 命名空间
May 13 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
JS常用正则表达式总结
Nov 12 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
vue.js语法及常用指令
Oct 29 Javascript
node使用promise替代回调函数
May 07 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
10分钟学会js处理json的常用方法
Dec 06 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
php生成微信红包数组的方法
2019/09/05 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
nodeJS模块简单用法示例
2018/04/21 NodeJs
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
Android分包MultiDex策略详解
2017/10/30 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
python异步存储数据详解
2019/03/19 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Pytorch to(device)用法
2020/01/08 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
Python将字典转换为XML的方法
2020/08/01 Python
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
八年级英语教学反思
2014/01/09 职场文书
手机促销活动方案
2014/02/05 职场文书
运动会宣传口号
2014/06/09 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
导师鉴定意见
2015/06/05 职场文书
居住证明范文
2015/06/17 职场文书
企业文化学习心得体会
2016/01/21 职场文书
python如何读取.mtx文件
2021/04/22 Python