vue-cli搭建三种不同开发环境

发布时间:2018-11-13 浏览次数:2022 文章来源:个人博客

利用vue开发的项目,几乎都是前后端分离的形式,而且通常都是利用vue-cli手脚架来搭建项目。

但是,搭建出来后,我们发现vue-cli的默认环境只有两种,一个是dev开发环境,另一个是production生产环境,但是我们实际上还需要用到一个test测试环境,做发布生产环境前的测试。

最开始的做法,就是修改production里面的设置,在发布测试的时候,修改成测试的后端api地址,然后没问题了,在换成生产的api地址发布,这样很麻烦,每次都要更改,而且很容易出错。

于是,用了cross-env来改进。利用cross-env来对打包口令加上一个变量,用于区别各种环境。

首先,用npm安装cross-env。

npm install cross-env

安装完成后,我们可以打开package.json

找到scripts里面,里面就是运行的指令了。

我们增加两条指令:

"build:test":"cross-env env_config=test node build/build.js"
"build:prod":"cross-env env_config=prod node build/build.js"

这样即可。

然后,我们可以在webpack中的build配置文件中,或者其他配置文件中,通过

process.env.env_config == "test"

或者

process.env.env_config == "prod"

来判断是运行打包发布到哪个环境,进而运行对应的配置。

key-word
VUE发布不同环境 测试 开发 生产