【前端实战小技巧】根据环境自动切换API接口地址

⚡️来源自互联网公司实际项目中的设计技巧
⭐️ 没有晦涩难懂的底层原理，也没有高深莫测的程序算法
😋简单直白，平铺直叙，一目了然，一学就会。

前言

在企业项目日常开发过程中，至少有两台应用服务器，一个用于开发测试使用（测试环境），一个用于供客户访问（生产环境）。在前端项目中，开发测试阶段调用测试环境的API，等正式上线时就要切换调用生成环境的API，这是一个固定不变的套路。对于我们程序员来说，这种单一乏味的工作怎么能亲自动手呢？直接让计算机自己做不就好啦~接下来就分享一个设计小技巧:根据环境自动切换API接口地址。

设计思路

思路非常简单，就如同把大象放进冰箱共需几步一样。

step 1：定义不同环境对应的API地址
step 2：判断当前所处环境（测试？生产？）
step 3：根据环境，动态加载地址

实战详解：小程序

step 1：定义不同环境对应的API地址

在小程序中我们可以使用js对象来定义API地址。样例代码如下所示：

export const URL = {
	DEV: {
		API: 'http://test.crxk.top/crxk/wxapp/'
	},
	PRO: {
		API: 'http://production.crxk.top/crxk/wxapp/'
	},
}

step 2：判断当前所处环境

这是整个设计的核心，我们需要让程序本身判断出当前的运行环境。在微信小程序中有相关的API可用于判断环境。

const accountInfo = wx.getAccountInfoSync();

这是一个同步调用的接口，用于返回当前账号的一些信息。

accountInfo.miniProgram.envVersion

这一字段标识了目前程序所处的环境。

值	环境
develop	开发版
trial	体验版
release	正式版

step 3：根据环境，动态加载地址

此时就很简单了，根据第二步的结果，动态选择请求地址即可。样例代码如下：

// 获取当前帐号信息
const accountInfo = wx.getAccountInfoSync();

// 获取环境类型
const env = accountInfo.miniProgram.envVersion;

if (!env) {
	console.error("获取运行环境失败!");
}
let baseUrl = ''
if (env === 'trial' || env === 'develop') {
	baseUrl = URL.DEV.API
} else if (env === 'release') {
	baseUrl = URL.PRO.API
} else {
	baseUrl = URL.DEV.API
}
// 此处省略了网络请求的代码……

web项目（以Vue.js为例）

step 1：定义不同环境对应的API地址

在web项目中对于API接口地址的定义与小程序中有些不同，需要以配置文件的形式定义。此处先罗列出如何定义，具体原因会在step 2中为大家讲解。

在项目根目录中建立如下两个文件

• .env.development
• .env.production

在每个文件中写清楚环境标识与API地址。

配置文件 .env.development

# NODE_ENV
ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://test.crxk.top/crxk/web/'

配置文件 .env.production

# NODE_ENV
ENV = 'production'

# base api
VUE_APP_BASE_API = 'http://production.crxk.top/crxk/web/'

step 2：判断当前所处环境

DefinePlugin

在web项目代码运行于浏览器，可惜的是浏览器并没有那么智能，会像微信小程序那样提供一个方法，可以直接得到目前程序所运行的环境。因为微信小程序的环境是腾讯开发人员所定义好的，有且只有三种：开发版、体验版、线上版。对于网页，浏览器并没有定义所谓的环境，测试版、线上版是由每个项目的开发者定义的，浏览器可猜不透你的心思~

那就没办法让程序自主判断当前所处的环境了吗？答案是否定的。

现在的前端页面已经脱离了早期刀耕火种的那个年代，有了更高级更先进的工具用于构建复杂的前端应用程序。这就不得不提一下鼎鼎有名的webpack，在webpack中有这么一个插件：DefinePlugin。

The DefinePlugin allows you to create global constants which can be configured at compile time. This can be useful for allowing different behavior between development builds and production builds.

DefinePlugin允许您创建可以在编译时配置的全局常量。 这对于在开发版本和生产版本之间允许不同的行为很有用。

有了DefinePlugin，可以间接达到我们的目的，判断当前程序所处的环境是为了更具环境动态切换API地址，即在开发版本和生成版本之间有不同的行为。那么应该如何使用呢？需要学习webpack嘛？ 实际上并不需要，这里仅仅是把底层原理简单讲解一下，具体使用时非常简单。

Vue CLI 环境变量和模式

Vue CLI 是目前Vue.js项目开发中最常用的脚手架工具。

在step1中我们所写的配置文件就是为Vue CLI 环境变量和模式所服务的。

当我们在开发阶段会运行

npm run serve

这条命令去启动程序，当Vue CLI执行这条命令时会默认读取 .env.development里面所配置的信息。将其加载到process.env之中。
我们在App.vue文件中可通过如下代码获取配置信息。

<template>
/**省略代码**/
</template>
<script>
// 配置信息在process.env之中
console.log('process :>> ', process.env);
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
/**省略代码**/
<style>

}
</style>

这里获取配置信息的底层原理即为DefinePlugin。

同理当我们开发完成，把前端程序打包发布时会运行

npm run build

此时 Vue CLI 则会读取 .env.production 下的内容，将其加载到process.env之中。

所以 Vue CLI 会在测试环境、开发环境不同环境中根据配置文件选择不同的配置信息。

step 3：根据环境，动态加载地址

通过以上分析，现在是不是清晰很多了，我们只需要在请求地址中写好我们配置好的地址信息，剩下的Vue CLI就会帮我们自动搞定啦。示例代码如下：

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 50000 
})

结尾

举一反三，既然可以根据环境自动切换API地址，那么是不是也可以做一些其他的事情呢？比如写一个日志记录方法，在测试环境下输出日志，在生产环境下不输出日志？

function log(msg) {
	if (测试环境) {
		console.log(" msg ==>", msg)
	} else {
		// do nothing
	}
}

这种设计没有高门槛，普通小白也可以既看即用。稍微通晓了设计原理后就可以为所谓欲，代码之路也会一马平川啦！

🥰如果您觉得写得还不错，记得 点赞 👍 + 关注👀 + 评论💋 三连，鼓励我写出更好的教程💪