如何在 React 中重用或扩展 .env 变量

Question

我有 reactJS APP(CRA) 并为属性添加了 .env 文件。但每次我需要在多个地方输入相同的值。那么有什么办法可以重复使用呢。

我的.env:

REACT_APP_SERVER_API=https://api.mysite.com
REACT_APP_AUTH_API=https://api.mysite.com/auth/login
...

但想要类似的东西

REACT_APP_AUTH_API=${REACT_APP_SERVER_API}/auth/login

我尝试了不同的方式，例如：

REACT_APP_AUTH_API=${REACT_APP_SERVER_API}
REACT_APP_AUTH_API={REACT_APP_SERVER_API}
REACT_APP_AUTH_API=REACT_APP_SERVER_API
REACT_APP_AUTH_API=`${REACT_APP_SERVER_API}`
REACT_APP_AUTH_API=`{REACT_APP_SERVER_API}`

以上内容均未评估，因此我不得不多次输入相同的内容，我有大量具有父子 uri 的 api。

Answer 1

这在 create-react-app 文档here 中有记录。

扩展当前 .env 文件的本地变量：

DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar

或者，您可以在 javascript 文件中处理此问题。

const API_BASE_URL = process.env.REACT_APP_SERVER_API;

const LOGIN_URL = `${API_BASE_URL}/auth/login`;
const GET_DATA = `${API_BASE_URL}/data`;