这是一个关于如何在React中用dotenv (.env)文件创建和访问环境变量的快速教程。
用Create React App构建的React应用开箱即支持dotenv环境变量，所以你需要做的就是在React项目的根目录下添加一个.env 文件。
要用Create React App生成一个React项目，运行npx create-react-app ，该工具也被用来构建和提供应用程序。关于Create React App的更多信息见create-react-app.dev/。
如何让React客户端应用程序访问环境变量
只有一个问题，要从客户端应用程序访问环境变量，它们必须以REACT_APP_ 为前缀。否则，它们将只能在服务器端被访问。
你可以通过Node.js的process.env. 对象从你的React应用中访问环境变量（有REACT_APP_ 前缀）。例如，const myVar = process.env.REACT_APP_MY_VAR; 。
StackBlitz上的React环境变量例子
这里有一个包含几个环境变量的React应用程序的例子。它显示了以REACT_APP_ 为前缀的env变量可以被App组件访问，而只有服务器端的变量则不能。
(见StackBlitz上的stackblitz.com/edit/react-…
dotenv（.env）文件的例子
示例应用程序中的dotenv文件。它定义了两个环境变量，其中以REACT_APP_ 为前缀的变量可以被React客户端应用程序访问，而没有前缀的变量只能被服务器端代码访问。
# variables prefixed with REACT_APP_ are accessible from the react client app
REACT_APP_MY_ENV_VARIABLE=environemnt variable value from .env file
# variables without the REACT_APP_ prefix are NOT accessible from the react client app
SERVER_SIDE_ONLY_VAR=this can't be accessed on the client
React应用程序组件
App 组件试图显示这两个环境变量，但只能访问前缀为REACT_APP_ 的那个。
它通过Node.js对象process.env ，访问.env 文件中的变量。
export default function App() {
return (
React - Access Environment Variables from dotenv (.env)
REACT_APP_MY_ENV_VARIABLE: {process.env.REACT_APP_MY_ENV_VARIABLE}
SERVER_SIDE_ONLY_VAR: {process.env.SERVER_SIDE_ONLY_VAR}
);
}
关于在用Create React App构建的React应用中使用环境变量的更多信息，见create-react-app.dev/docs/adding…
