前端代码多环境打包方案
在通过node编译打包代码的时候，通常会用到 process.env ，他和我们的配置文件息息相关，在开发的过程中往往用它来判断环境，接口，版本等。以下是我对 process.env 环境变量的一些见解，有些术语可能不够准确，欢迎指正。
我的操作环境：
Windows 10 专业版
node V8.5.0
npm V5.3.0
命令行工具 cmder
1. process.env 获取环境变量
先来进入 node 命令行， 简单的看看自己电脑的环境变量：
node
console.log(process.env)
输出大量的环境信息
[图片上传失败...(image-e17ba8-1535186876816)]
接下来学习一个window 下的一个命令 set ，下面设置一个新的环境变量 aaaa 并赋值 Dog
set aaaa=Dog
[图片上传失败...(image-5b021-1535186876816)]
2. vue
2.1 vue-cli2
vue-cli搭建的项目如何实现多环境
注意：非vue-cli3.0
2.1.1 process.env 全局常量
初始化vue webpack 项目 并在 build/webpack.dev.conf.js 和src/main.js 打印 process.env
// build/webpack.dev.conf.js
console.log('windows环境变量', process.env)
[图片上传失败...(image-d4568-1535186876816)]
// src/main.js
console.log('全局常量', process.env)
[图片上传失败...(image-4c44e3-1535186876816)]
其实在编译阶段 process.env 是用node 取的 windows 环境变量，编译成功后则是 webpack 通过 DefinePlugin 配置的常量。不管是开发环境执行的 webpack.dev.conf.js 还是生产环境的 webpack.prod.conf.js 都是通过引入配置文件的方式 定义了一个新的 process.env 。
[图片上传失败...(image-10a383-1535186876816)]
2.1.2 打包不同的版本
接下来我们的目的的打包不同的版本，所以主要在 webpack.prod.conf.js 打包文件是进行配置。
:one: 设置一个新的 window 环境变量 dog
[图片上传失败...(image-fface5-1535186876816)]
[图片上传失败...(image-9529ce-1535186876816)]
:two: 新建一个该环境的配置文件 config/dog.env.js
[图片上传失败...(image-1c7a4a-1535186876816)]
:three: 根据环境变量加载不同的配置3.3.3文件
[图片上传失败...(image-864994-1535186876816)]
:four: 最终打包后得到 dog 相关配置
[图片上传失败...(image-cb85fd-1535186876816)]
注意：以上是原理讲解，在实际开发过程中一般使用 cross-env 跨平台设置环境变量， 兼容windows 和 mac 端。有兴趣也可以了解下 dotenv 以达到像 react 或 vue-cli3.0 那样以文件来设置环境变量。
2.2 vue-cli3.0
文档越来越健全，直接参考 环境变量和模式 。
3. react
つづく
