process 对象是一个全局变量，提供了有关当前 Node.js 进程的信息并对其进行控制。
process.env 属性会返回包含用户环境的对象。
本文介绍如何配置使用process.env环境变量。

原理

采用nodejs顶层对象中process基础类下process.env属性，返回包含用户环境的对象。根据各个环境的配置文件区分和控制。

node环境变量

node环境变量指nodejs执行环境的环境变量。
此处的nodejs指的是webpack的编译环境。

通过npm script中的set属性设置

//package.json
"scripts": {
    "dev": "set NODE_ENV=develop &&  set PORT=8085 && webpack-dev-server --inline --progress  --config  build/webpack.dev.conf.js ",
    "build": "node build/build.js"
  },

在webpack编译过程中获取

//webpack.dev.conf.js
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
console.log(process.env.NODE_ENV,process.env.PORT)
// develop 8085

客户端环境变量

客户端环境变量指在本地运行的代码中获取到的环境变量。
通过webpack插件DefinePlugin 配置

//webpack.dev.conf.js
plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    })
  ]

//dev.env.js
'use strict'
const merge = require('webpack-merge')

module.exports = merge({
  NODE_ENV: '"development"'
})

本地运行代码获取

created() {
	console.log(process.env)
	//{NODE_ENV: "development"}
}

客户端环境变量只能通过console.log()打印，断点无法获取变量值。

三、模式和环境变量

模式

vue-cli提供了三种模式development、test、production。
通过传递--mode选项参数为令名行覆写默认模式。

vue-cli-service build --mode development

vue-cli-service命令会从对应的.env文件读取响应的环境文件。
如果文件不包含NODE_ENV变量，它的值将取决于模式。
建议在环境文件中配置环境变量。

环境变量

通过在.env文件指定环境变量

//dev.env.js
module.exports = {
  NODE_ENV: '"development"'
}

注意：只有NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

无效设置：

NODE_ENV=production
TITLE=My App

有效设置：

NODE_ENV=production
VUE_APP_TITLE=My App

总结

本文介绍的环境变量用于区分不同环境作用。
然而和操作系统的环境变量，例如JAVA_HOME、NODE相比,
相同的是都是在某个执行域中指定某些只在本域可执行、获取的变量；
不同的是操作系统指定的大多是可执行程序，客户端指定的是变量。