从我的 React 应用程序中的环境变量加载值不起作用

Question

在我的 React 应用程序（使用 create react app）中，我有一个 Constants.js 文件，其中包含以下常量：

export const API_ROOT = process.env.REACT_APP_API_ROOT || 'http://www.example.com.com:4000/api';
export const APP_ROOT = process.env.REACT_APP_APP_ROOT || 'http://app.example.com:3001';

由于某种原因，即使我在服务器上定义了 ENV 变量，我的服务器也没有接收到它。我更改了周围的值只是为了查看从哪里获取值。

API_ROOT=http://dev.example.com/api
APP_ROOT=http://app.example.com
REACT_APP_API_ROOT=http://www.example.com:3002/api
REACT_APP_APP_ROOT=http://app.example.com:3002

我不确定命名约定，所以我定义了以上所有 4 个。当我推送到我的服务器时，我仍然看到 API_ROOT 和 APP_ROOT 值是默认值，即不是来自 ENV 变量：

  http://www.example.com.com:4000/api
  http://app.example.com:3001

我确实通过登录服务器并验证 ENV 变量是否存在进行了验证：

echo $API_ROOT
echo $REACT_APP_API_ROOT

我在从 ENV 变量获取值方面做错了什么？

Answer 1

process.env 是您的环境通过 NodeJs 提供的全局对象。因为我们在浏览器中没有 NodeJS，所以它不会理解 process.env.API_ROOT。您使用默认包含 webpack 的 react-create-app 初始化您的应用程序，因此我建议您使用 .env 文件通过 dotenv.

设置环境变量

注意：dotenv包含在create-react-appv0.2.3及更高

中

创建 .env 文件包含

API_ROOT=http://dev.example.com/api
APP_ROOT=http://app.example.com
REACT_APP_API_ROOT=http://www.example.com:3002/api
REACT_APP_APP_ROOT=http://app.example.com:3002

配置 webpack:

const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = () => {
  // call dotenv and it will return an Object with a parsed key 
  const env = dotenv.config().parsed;

  // reduce it to a nice object, the same as before
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };

参考：

希望这会有所帮助。

从我的 React 应用程序中的环境变量加载值不起作用

Loading values from environment variables in my React application not working

reactjs

create-react-app