别在js中写后台地址了——用好React/Vue脚手架的环境变量

背景

前端开发都少不了对后台的调用，后台地址配置在哪里，是一个很纠结的问题 为此大家开动脑筋，想了不少办法：

1. 在代码中定义一个常量如baseUrl，后台请求时，统一拼上这个baseUrl； 问题：本地、开发、测试、生产环境地址不一样，得反复改地址；
2. 前端与后台代码部署在一个域下，使用相对路径访问后台； 问题：开发阶段本地调试的时候，还是避免不了要用方案一来配置一个baseUrl，且这个改动与代码放在一起，一不小心就提交到代码库，CI打出来的包就不对了。

解决方案

只要是通过React和Vue脚手架创建的项目，都支持配置环境变量，使用方式：

定义环境变量

#React项目.env文件
REACT_APP_BASEURL=https://prod.utcook.com

#Vue项目.env文件
VUE_APP_BASEURL=https://prod.utcook.com

在代码中使用

import axios from 'axios';
const baseUrl = process.env.REACT_APP_BASEURL;
axios.get("${baseUrl}/api/user/list");

本地调试时，后台地址不一样怎么办？

有两种方式可以定义本地地址：

1. 通过.env.local文件：

#React项目.env.local文件
REACT_APP_BASEURL=http://192.168.1.123:8080

#Vue项目.env.local文件
VUE_APP_BASEURL=http://192.168.1.123:8080

2. 通过环境变量覆盖

• WebStorm可以直接在"Run/Debug Configurations"->Enviroment里面指定
• 其它IDE也可以通过Windows或Linux的系统环境变量来指定

有多套环境怎么办？

React和Vue脚手架支持同样的mode机制：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
# 优先级越往下越高

mode与npm脚本的对应规则：

• npm run build默认production模式(.env.production)
• npm run start或npm run serve默认development模式(.env.development)
• npm run test默认test模式(.env.test)

React和Vue的脚手架，同样都为我们设计好了git的忽略规则：

# React脚手架生成的.gitignore
.env.local
.env.development.local
.env.test.local
.env.production.local

# Vue脚手架生成的.gitignore
# local env files
.env.local
.env.*.local

• 我们可以在.env中配置所有变量的默认值，在对应mode的配置文件中配置不同环境的变量；
• 如果有开发、测试、生产多套环境，可以在对应的CI脚本里面配置环境变量去覆盖；
• 更多信息，请参考本文档最后的链接。

参考

• Vue环境变量和模式
• React脚手架环境变量

来源：oschina

链接：https://my.oschina.net/u/4254626/blog/4292999