使用cross-env添加环境变量

.NODE_ENV应该是我们最熟悉的环境变量了，它经常出现在使用框架或者类库的时候，被用来区分不同的环境（开发，测试，生产等），以便我们进行相对应的项目配置，比如是否开启sourceMap，api地址切换等。那为什么.NODE_ENV能用来区分环境呢？它是如何来的？

先来看一下process和的官方解释：

process 对象是一个 global （全局变量），提供有关信息，控制当前进程。作为一个对象，它对于应用程序始终是可用的，故无需使用 require()。

属性返回一个包含用户环境信息的对象。

在node环境中，当我们打印时，发现它并没有NODE_ENV这一个属性。实际上，.NODE_ENV是在的scripts命令中注入的，也就是NODE_ENV并不是node自带的，而是由用户定义的，至于为什么叫NODE_ENV，应该是约定成俗的吧。

{
  "scripts": {
    "dev": "NODE_ENV=development webpack --config "
  }
}
复制代码

可以看到NODE_ENV被赋值为development，当执行npm run dev时，我们就可以在脚本中以及它所引入的脚本中访问到.NODE_ENV，而无法在其它脚本中访问。

前面提到，在scripts命令中注入的NODE_ENV只能被webpack的构建脚本访问，而被webpack打包的源码中是无法访问到的，此时可以借助webpack的DefinePlugin插件，创建全局变量。

const webpack = require('webpack');
 = {
  plugins: [
    new ({
      '.NODE_ENV': '"development"'
    })
  ]
}
复制代码

当然DefinePlugin不仅仅可以定义.NODE_ENV，你也可以根据自己的需要定义其他的全局变量。定义完成之后，就可以在项目代码中直接使用了。

在window平台下直接设置NODE_ENV =XXX是会报错的，cross-env 能够提供一个设置环境变量的scripts，这样我们就能够以unix方式设置环境变量，然后在windows上也能够兼容。

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

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server"
}
复制代码

如果需要配置的环境变量太多，全部设置在scripts命令中既不美观也不容易维护，此时将环境变量配置在.env文件中，然后使用dotenv插件来加载.env配置文件。

npm install dotenv --save
复制代码

NODE_ENV = development
# 这是注释
API_URL = 
复制代码

require('dotenv').config()
复制代码

这样就可以在程序中使用环境变量了。

在实际项目中，我们一般还是在scripts命令中设置NODE_ENV，然后通过不同的NODE_ENV来加载不同的.env文件。

举个例子：

有一个项目，简单的项目结构如下：

├── env
   ├── .
   ├── .
   ├── .
   └── .
├── 
复制代码

.env.***文件中配置了每个环境对应的变量，例如：

# . 文件
API_URL = 

# . 文件
API_URL = 

# . 文件
API_URL = 
复制代码

在加载env配置：

require('dotenv').config({ path: (__dirname, './env/.env.' + .NODE_ENV) })
复制代码

最后别忘了还要在scripts命令中设置NODE_ENV：

# dev
cross-env NODE_ENV=dev

# test
cross-env NODE_ENV=test

# pre
cross-env NODE_ENV=pre

# prd
cross-env NODE_ENV=prd
复制代码

Vue cli 也可以加载.env文件，详情可查看：Vue cli-环境变量和模式

秒客网