vue如何自动化打包测试环境和正式环境的dist/test文件


Posted in Javascript onJune 06, 2019

使用vue现在已经差不多2年了,想起来两年前的一次和某阿里处理的技术大牛(当时我们的技术总监)一起开发一个SPA项目的时候被硬着头皮去解决的一个难题,因为技术老大是阿里出身的,所以很多东西都是比较倾向于自动化,从项目ui设计到项目管理,到打包测试,到发布全部都要求我们要实现自动化,尽可能的减少手动操作。

当时技术大佬要求的事在jenkins进行一键打包,就是他点击不同的按钮在同一套代码上面分别打包测试环境运行的包和正式环境运行的包,刚刚接触vue的我摸不着头脑,老大给了我一天时间研究这个玩意,没办法,只好硬着头皮做,后来想想改造一下,也比较简单。

Step1、package.json中新增命令行脚本test命令,并指向build文件夹下的test.js。

vue如何自动化打包测试环境和正式环境的dist/test文件

Step2、在在build文件夹中新建test.js,内容可以直接拷贝同目录build.js内容,修改一些参数 这样就多了个test环境

vue如何自动化打包测试环境和正式环境的dist/test文件

Step3、 在build文件夹中新建webpack.test.conf.js,内容可以直接拷贝同目录webpack.prod.conf.js内容,修改一些参数。

这样构建时就会去config文件夹下的test.env.js寻找环境变量。

vue如何自动化打包测试环境和正式环境的dist/test文件

Step4、在config下创建test.js文件

vue如何自动化打包测试环境和正式环境的dist/test文件

Step5、在封装的axios.js的文件夹下创建config.js

vue如何自动化打包测试环境和正式环境的dist/test文件

Step6、在封装的axios引入config.js

vue如何自动化打包测试环境和正式环境的dist/test文件

封装的get 和post请求

vue如何自动化打包测试环境和正式环境的dist/test文件

Step7、在config文件下的index增加test模块(可复制build)并更改相应的参数。

vue如何自动化打包测试环境和正式环境的dist/test文件

在打包的时候执行:npm run test 就会自动的指向测试环境的域名dist文件,执行npm run build 就会打包指向正式环境的域名的dist文件,在Jenkins里面的分别连接至gitlab/github,并将命令分别分配给run test && run build,需要发布的时候就直接点击不同的按钮,然后再Linux下自动打包不同环境的dist,可以提高开发效率,减少开发和沟通成本。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
16个最流行的JavaScript框架[推荐]
May 29 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 #jQuery
JS根据json数组多个字段排序及json数组常用操作
Jun 06 #Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 #Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 #Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 #Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 #Javascript
详解新手使用vue-router传参时注意事项
Jun 06 #Javascript
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
PHP读取xml方法介绍
2013/01/12 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
vue组件的写法汇总
2018/04/12 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
园林毕业生自我鉴定范文
2013/12/29 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
办理收楼委托书范本
2014/10/09 职场文书
优质护理服务心得体会
2016/01/22 职场文书
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android