vue-cli配置环境变量

在实际项目开发中,常常会碰到须要环境变量的情景,在vue-cli的环境下,默认已经配置了一个NODE_ENV的环境变量,当npm run dev的时候这个是development, 当npm run build 的时候这个是production.用过vue-cli开发的一般对这个都不陌生,用这个最多的基本就是咱们配置ajax请求的域名头了,

if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://customer.medsci.cn'
}
复制代码

一般会有测试服务器和正式服务器环境之分,咱们请求的域名也得区分,因此经过proces.env.NODE_ENV来区分环境变量,经过这个可以全局访问的参数,咱们能够处理不少须要环境处理不一样的操做. 上面的process.env.NODE_ENV是vue-cli默认配置的,有时候咱们可能以为光是只有一个开发环境和生产环境还不够,好比咱们还想来一个测试坏境,这时候就须要本身定义了.如下以windows坏境为例,mac环境相似. 首先能够安装cross-env

npm install cross-env --save-dev
复制代码

vue-cli的配置本质就是webpack的配置,当咱们运行npm run dev 的时候,其实执行的是package.json 中的scripts 的dev中 ,即build/dev-server.js 这里面一系列的配置启动整个服务.

咱们只想加一个环境变量,能够复制一份,在dev下加一个devtest命令:

"devtest": "cross-env TESTING=true  node build/dev-server.js",
复制代码

这样咱们就能够经过npm run devtest也能启动整个服务了,注意上面的命令,咱们加了一个TESTING=true ,这个就是加入的环境变量,TESTING:true, 经过上面的devtest的配置,咱们能够运行npm run devtest像nppm run dev那样运行起来整个程序,不过咱们发现,此时在项目中咱们获取不到process.env.TESTING这个变量,这是为何呢,若是是直接用webpack是能够的,通过查看,是在vue-cli的一系列配置文件中,已经写死了这些,不过咱们能够改动加上 在根目录 config下,有dev.env.js和prod.env.js,这两个文件就是关键了,咱们在NODE_ENV下面加一行TESTING:process.env.TESTING

module.exports = {
  NODE_ENV: '"production"',
  TESTING: process.env.TESTING
}
复制代码

这时咱们就能全局访问process.env.TESTING变量了,当咱们npm run dev的时候,这个是undefined,当npm run devtest的时候是true, 同理咱们能够添加一个npm run test命令, 与npm run build命令对应,加入打包测试的环境变量. vue-cli的配置本质仍是webpack的配置, 普通的webpack配置也能够采用此方法. 个人博客原文blog.noob6.com/2018/07/08/…