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 相关文章推荐
JS 文件大小判断的实现代码
Apr 07 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
swiper实现导航滚动效果
Dec 13 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
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php工具型代码之印章抠图
2018/07/18 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
百度地图api如何使用
2015/08/03 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
让python json encode datetime类型
2010/12/28 Python
浅谈Python中的数据类型
2015/05/05 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
毕业生自我鉴定范文
2013/11/08 职场文书
面试后的英文感谢信
2014/02/01 职场文书
全国文明单位申报材料
2014/05/31 职场文书
公司授权委托书范文
2014/08/02 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL