如何从外部config目录的.env文件向React.js应用传入环境变量

前置要求 #

• .env文件中的环境变量必须以REACT_APP_为前缀，比如REACT_APP_API_BASE=http://localhost:3000，React只会识别带这个前缀的变量。

步骤1：安装env-cmd工具 #

在frontend目录下执行命令，安装用于指定env文件路径的工具：

npm install env-cmd --save-dev

步骤2：修改frontend的package.json脚本 #

找到package.json中的scripts字段，将start和build命令修改为指定config目录下.env文件的路径：

"scripts": {
  "start": "env-cmd -f ../config/.env react-scripts start",
  "build": "env-cmd -f ../config/.env react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

步骤3：验证环境变量是否生效 #

在React组件中直接通过process.env.REACT_APP_XXX调用变量，比如：

function Home() {
  return (
    <div>
      当前API地址：{process.env.REACT_APP_API_BASE}
    </div>
  );
}

export default Home;

启动前端项目后，就能看到环境变量被正确渲染出来。

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