React中如何在.env文件内使用变量定义基础URL

现有.env文件内容如下：

REACT_APP_API_URL_API_LOGIN =  "http://x.x.x.x:1000/api/loginuser"
REACT_APP_API_URL_API_SIGNUP= "http://x.x.x.x:1000/reg/CheckRegister"
REACT_APP_API_URL_API_FETCH_IMAGE = "http://x.x.x.x:1000/api/userImage"
REACT_APP_API_URL_API_VERIFY_USER = "http://x.x.x.x:1000/reg/RegisterUser"

出于测试便捷性考虑，希望提取x.x.x.x:1000作为基础URL单独定义，在同一.env文件内通过引用该变量拼接其他接口地址，期望写法示例：

REACT_APP_API_URL_API_BASE = x.x.x.x:1000
REACT_APP_API_URL_API_LOGIN =  "http://REACT_APP_API_URL_API_BASE/api/loginuser"

已排除多.env文件或在React代码内定义常量的方案（会增加代码修改复杂度），询问如何在单个.env文件内实现该需求。

方法：利用dotenv的变量插值功能（CRA内置支持） #

Create React App（CRA）使用的dotenv工具内置了变量扩展能力，可直接在.env文件中通过${变量名}的语法引用已定义的环境变量，具体写法如下：

# 定义基础URL（建议包含http/https前缀，避免重复拼接）
REACT_APP_API_BASE = "http://x.x.x.x:1000"

# 通过${变量名}引用基础URL拼接接口地址
REACT_APP_API_URL_API_LOGIN = "${REACT_APP_API_BASE}/api/loginuser"
REACT_APP_API_URL_API_SIGNUP = "${REACT_APP_API_BASE}/reg/CheckRegister"
REACT_APP_API_URL_API_FETCH_IMAGE = "${REACT_APP_API_BASE}/api/userImage"
REACT_APP_API_URL_API_VERIFY_USER = "${REACT_APP_API_BASE}/reg/RegisterUser"

注意事项：

• 变量定义顺序必须是先定义基础变量，再定义引用它的变量，否则会出现未定义的情况。
• 所有变量需保留REACT_APP_前缀，CRA才会将其注入到React应用中。
• 若使用非CRA的React项目，需手动安装dotenv-expand依赖，并在加载.env文件时启用扩展功能。

内容的提问来源于stack exchange，提问作者yasxcv