前端代码多环境打包方案

前端代码多环境打包方案

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

つづく