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

Vicky 发布于2019-08-23 17:58 / 1461人阅读

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

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

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

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

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

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

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

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

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

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

封装的get 和post请求

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

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

云服务器 GPU云服务器自动化测试环境全面评估音视频实时通信的开发测试环境服务器环境的文件如何配置云主机的环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104439.html

接口环境很多？静态资源要放cdn？不用修改代码，用webpack就可以（vue）

摘要：传送门针对解决的问题接口环境很多，有测试服，有，有正式等等，每次都要修改代码静态资源可能要存到中，这也要修改代码吗修改配置文件只需要修改环境列表，第一个环境为默认环境指明现在使用的环境打包的路径，只在的时候有用这个环境下面的请求的域 multi-hostname-vue-cli github传送门针对解决的问题接口环境很多，有测试服，有qa，有正式等等，每次都要修改代码？no! ...

SoapEye 2019-08-20 18:04 评论0 收藏0
webpack 项目构建：（三）开发环境——本地服务器搭建

摘要：上一章我们了解了的编译环境搭建项目构建二编译环境搭建这一章我们会结合的，介绍本地测试服务器的搭建过程。三开发环境有一些特性是专门用于开发环境的，可以帮助我们搭建一个更好的开发环境。我们可以通过配合使用来搭建本地服务。注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。上一章我们了解了 webpack 的 ES6 编译环境搭建：webpack...

tolerious 2019-08-22 15:10 评论0 收藏0
vue源码构建代码分析

这是xue源码学习记录，如有错误请指出，谢谢！相互学习相互进步。 vue源码目录为 vue ├── src #vue源码 ├── flow #flow定义的数据类型库（vue通过flow来检测数据类型是否正确） ├── examples #demo ├── scripts #vue构建命令 ├── ... vue内部代码模...

RyanHoo 2019-08-23 12:22 评论0 收藏0
测试你的前端代码 - part3（端到端测试）

摘要：单元测试几乎不会出现不稳定的情况，因为单元测试通常是简单输入，简单输出。链接直达测试你的前端代码集成测试。本文作者：Gil Tayar 编译：胡子大哈翻译原文：http://huziketang.com/blog/posts/detail?postId=58d50da37413fc2e8240855c 英文连接：Testing Your Frontend Code: Part ...

ixlei 2019-05-29 16:59 评论0 收藏0