process.env环境变量配置
process对象是一个全局变量，提供了有关当前 Node.js 进程的信息并对其进行控制。
process.env属性会返回包含用户环境的对象。
本文介绍如何配置使用process.env环境变量。
一、为什么需要环境变量？
版本差异
一个项目从开发到上线一般都会经历三个过程，从开发版本到测试版本到生产版本。每个版本都有对应的相同的或者不同的后端数据库、api地址、前端编译环境。
拿前端编译环境来说，开发环境需要启动热更新、不需要启动代码压缩混淆；
生产版本不需要启动热更新，需要启动代码压缩混淆。
请求前缀
日常开发过程，都会封装请求方法类，其他模块直接调用请求方法类传递请求头、请求参数等即可发送http请求。
然而真实的开发过程每个版本都会对应一个不同的请求地址。
其他
- 系统基础信息
- 系统访问异常返回信息
- 其他在不同环境上单独配置的信息
二、原理
采用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相比,
相同的是都是在某个执行域中指定某些只在本域可执行、获取的变量；
不同的是操作系统指定的大多是可执行程序，客户端指定的是变量。
