Vue项目针对测试、生产环境打包项目

摘要

npm run build作为vue项目的包构建指令在用vue-cli初始化项目时默认构建一个生产环境的包，但在实际项目的开发和部署中我们不仅仅只是开发环境和生产环境，介于两者之间的测试环境也是不可忽略的一部分。本文将对vue项目针对开发、测试、生产环境进行包的区分构建进行一些自己的讲述，若描述、理解有误欢迎指正。

新的改变

在刚接触vue时对包构建的过程没有过多的去关注，包的构建时依赖npm run build从测试环境贯穿到生产环境，接口API的配置则是在static中新建了一个config.js

// 将api地址作为添加到window对象下
window.config = {
   
  api: {
   
    apiUrl: 'https://fool.com/wapapi',
    Infversion: '1.0'
  }
}

完全不区分测试和生产环境，那么接口API地址是如何在测试和生产环境之间变更的呢？手动修改？No！肯定不是。这得感谢我强哥 @hknaruto在Jenkins自动部署时用脚本动态修改了API的值。但这种依托外界干涉的模式讲真的是非常傻，一点都不自动、一点都不智能。怪也怪自己以前的一成不变和墨守成规，其实说到底就是懒。确实，在搞技术上这种样子一点都不好…所以现在就开始来一些改变。

准备工作

安装cross-env依赖在终端执行

npm install --save-dev cross-env

关于依赖cross-env作为运行跨平台设置和使用环境变量的脚本，当执行build动作时通过设置、赋值环境变量告知当前构建包的是测试环境还是生产环境。
npm上对cross-env的说明

package.json

{
   
  "name": "demo",
  "version": "1.0.0",
  "description": "A Vue.js project"