目的

在项目开发的时候，往往都会有很多套环境，就是俗称的开发环境（供开发人员使用），测试环境（用户测试），正式环境（最终用户正式使用）。每个环境所使用的应用服务器，数据库服务器、域名、端口等等都有可能是不一样的，所以在要求我们能够一套代码能够运行在所有环境的前提下，需要确保我们每次发版的时候，应用连接的都是正确的后台地址，注意，这里说的是前后端分离项目中的前端项目。

有的项目在发版前，切换环境的方式是这样的，通过注释不同的代码，或者引入不同的文件来达到连接不同环境的目的，但是这样做是有一定风险的，在某次打包前端的时候，如果忘了执行上述的切换环境的步骤，是有可能会出现连接了错误环境的情况出现的，比如用户在正式环境的前端下了订单，但是数据请求的是开发环境的数据库，这样就有可能导致非常严重的问题。

需求

说一下本文的使用场景，也就是需求：

每次打包的时候，都强制要求开发人员输入正确的环境的标志，以确保所发布的前端代码连接的是正确的后台服务器；
有的开发人员是全栈开发，兼顾前端以及后台，所以要求在调试前端的时候，可以手动切换，是调试本地服务器，还是调试远程服务器；
在打包的时候，强制使用远程的ip地址（这种是针对移动端项目的，移动端安装安装完之后，移动设备本地不可能存在服务器这么一说，只能连接远程ip或者域名，而前端如果是跟后台服务放在同一台应用服务器上的话，可以继续使用本地ip连接，但是端口还是要一致的）。

步骤

安装一个依赖
```
npm install cross-env --save-env
```
在package.json的script中，编写对应环境的调试以及打包脚本：
```
  "scripts": {
    "dev": "cross-env env=dev release=false node build/dev-server.js",
    "uat": "cross-env env=uat release=false node build/dev-server.js",
    "start": "node build/dev-server.js",
    "dev-release": "cross-env env=dev release=true node build/build.js",
    "uat-release": "cross-env env=uat release=true node build/build.js"
  },
```
如脚本所示，在项目根目录下，执行
```
npm run dev
```
启动开发环境的调试服务，其中指定了env=dev（开发环境标志），release=false（不打包）
```
npm run uat
```
启动测试环境的调试服务，其中指定了env=uat（测试环境标志），release=false（不打包）
```
npm run dev-release
```
打包开发环境，其中指定了env=dev（开发环境标志），release=false（打包）

在根目录下的config/prod.env.js文件中给对象增加两个属性：

module.exports = {
  NODE_ENV: '"production"',
  env: '"' + process.env.env + '"',
  release: process.env.release
}

process.env.* 就是刚才在启动脚本的时候使用cross-env指定的键值对，这里在prod.env.js写完了之后，不需要再dev.env.js中编写，因为在dev.env.js中，这段代码表明了，dev.env.js是继承了prod.env.js的属性参数(需要注意的是，在config目录下的dev和prod指的是本地调试还是打包，而不是上面说的开发、测试以及正式环境)：
```
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})
```
准备环境配置文件，在src目录下新建env文件夹，里面放一些文件：

env.dev.js和env.uat.js存放的是环境的配置信息，比如移动端有远程的ip地址，app的下载地址等等。
随便列一下里面的内容：
```
```
export default {
  tag: 'dev',
  envName: '开发环境',
  mobile_ip: 'https://vaidnoho.qcloud.la',
}
```
```
env.public.js中存放的是一些公共的配置信息，每个环境都需要用到的配置信息，比如有的项目用了阿里巴巴的iconfont，指定了特殊的前缀，这时就可以在这里面将前缀信息记录下来，这里列一下该文件的内容：
```
export default {
  remote: false,                                  //是否连接远程ip地址
  local_mobile_ip: 'http://localhost:5757',       //本地服务IP地址
  scan_url: 'www.dp-xcx.com',                     //小程序扫描下载地址
  success_code: 0
}
```
通过更改remote的的true/false值，可以在调试的时候切换远程ip还是本地ip，有的项目在请求后端服务的时候可能都会有一个状态码，一般都是0 ，有的可能是200，标志本次请求成功，还有一些其他请求标志，也可以在这个文件配置。

最后一个关键文件：src/env/index.js，先看代码：

import publicEnv from 'src/env/env.public'
import devEnv from './env.dev'
import uatEnv from './env.uat'

let targetEnv;
switch (process.env.env) {
  case "dev":
    targetEnv = devEnv
    break;
  case 'uat':
    targetEnv = uatEnv
    break;
  default:
    throw new Error(`找不到当前环境-->>${process.env.env}`)
}

let finalEnv = Object.assign({}, publicEnv, targetEnv);

if (process.env.release == null)
  throw new Error("process.env.release不存在，请检查！")
else
  finalEnv.remote = !!process.env.release ? true : finalEnv.remote

finalEnv.mobile_ip = finalEnv.remote ? finalEnv.mobile_ip : finalEnv.local_mobile_ip
finalEnv.isRelease = process.env.release;

delete finalEnv.remote
delete finalEnv.local_mobile_ip

export default finalEnv

export function logEnv() {
  // console.log(`env-->>`, finalEnv);
  console.log('-----------------------------------------------------------')
  if (finalEnv.isRelease) {
    console.log(`打包压缩模式，强制使用远程ip,当前环境为：${finalEnv.envName}`)
    console.log(`远程IP地址-->>${finalEnv.mobile_ip}`)
  } else {
    console.log(`本地调试模式,当前环境为：${finalEnv.envName}`)
    console.log(`请求的IP地址-->>${finalEnv.mobile_ip}`)
  }
  console.log('-----------------------------------------------------------')
}

刚才第4步的时候，就提到过，代码运行之后，也可以访问process.env.env和process.env.release，这个index文件会根据这env和release自动判断，是调试还是打包，然后自动地去判断是否强制使用远程ip。

最后在使用的时候，还需要import env from ‘src/env’，然后console.log(env)，这时可以验证一下是不是所想要的结果。

Webpack配置环境切换

目的

需求

步骤

猜你喜欢