前端代码多环境打包

在通过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)

输出大量的环境信息

接下来学习一个window 下的一个命令 set ，下面设置一个新的环境变量 aaaa 并赋值 Dog

set aaaa=Dog

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)

// src/main.js
console.log('全局常量', process.env)

其实在编译阶段 process.env 是用node 取的 windows 环境变量，编译成功后则是 webpack 通过 DefinePlugin 配置的常量。不管是开发环境执行的 webpack.dev.conf.js 还是生产环境的 webpack.prod.conf.js 都是通过引入配置文件的方式 定义了一个新的 process.env 。

2.1.2 打包不同的版本

接下来我们的目的的打包不同的版本，所以主要在 webpack.prod.conf.js 打包文件是进行配置。

:one: 设置一个新的 window 环境变量 dog

:two: 新建一个该环境的配置文件 config/dog.env.js

:three: 根据环境变量加载不同的配置3.3.3文件

:four: 最终打包后得到 dog 相关配置

注意：以上是原理讲解，在实际开发过程中一般使用 cross-env 跨平台设置环境变量， 兼容windows 和 mac 端。有兴趣也可以了解下 dotenv 以达到像 react 或 vue-cli3.0 那样以文件来设置环境变量。

2.2 vue-cli3.0

文档越来越健全，直接参考 环境变量和模式 。

3. react

つづく