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"