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

8次阅读

共计 852 个字符,预计需要花费 3 分钟才能阅读完成。

使用 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,可以提高开发效率,减少开发和沟通成本。

正文完
 0