背景

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

在代码中定义一个常量如baseUrl，后台请求时，统一拼上这个baseUrl； 问题：本地、开发、测试、生产环境地址不一样，得反复改地址；

前端与后台代码部署在一个域下，使用相对路径访问后台； 问题：开发阶段本地调试的时候，还是避免不了要用方案一来配置一个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. 通过环境变量覆盖

有多套环境怎么办？

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

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

mode与npm脚本的对应规则：

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

链接: https://fly63.com/article/detial/9198