环境变量仅部分加载

Question

在我的 React 应用程序中，我使用 dotenv 和 dotenv-expand 模块以及 webpack 在本地管理我的环境变量。在我的开始脚本的顶部，我有：

process.env.NODE_ENV = "development";
require("../src/config/env");

这指向/src/config/env.js，其中包括：

const paths = require("./paths");
var dotenvFiles = [
    `${paths.dotenv}.${NODE_ENV}.local`,
    `${paths.dotenv}.${NODE_ENV}`,
    NODE_ENV !== "test" && `${paths.dotenv}.local`,
    paths.dotenv,
].filter(Boolean);
console.log(JSON.stringify(dotenvFiles));
// The above line confirms the .env file is included in dotenvFiles

var dotenv = require('dotenv');
var dotenvExpand = require('dotenv-expand');
dotenvFiles.forEach((dotenvFile) => {
    if (fs.existsSync(dotenvFile)) {
        var myEnv = dotenv.config({
            path: dotenvFile,
        });
        dotenvExpand.expand(myEnv);
    }
});
console.log(process.env.HIRING);
// The above line returns the correct value. At this point, it seems to have correctly loaded in the env vars.

在我的 .env 文件中有以下内容。所有变量都有一个值，我刚刚在 post:

中将其删除

CLIENT_PORT=
API_URL=
APP_URL=
RECAPTCHA_SITE_KEY=
ANALYTICS_TAG=
DURATION=
HIRING=

然后在 React 页面上我有：

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

console.log(JSON.stringify(process.env));

最后一行returns:

{
    "NODE_ENV":"development",
    "PUBLIC_URL":"",
    "API_URL":"http://localhost:3000/api/",
    "RECAPTCHA_SITE_KEY":"xxx",
    "APP_URL":"http://localhost:3002"
}
// Now HIRING no longer seems to be there...

尽管这包括 .env 文件中的 3 个变量（这些变量未在其他任何地方定义），.env 文件 中的其他变量缺失 在这里（即使 /src/config/env.js 末尾的 console.log 行包括例如 HIRING ，此时环境变量中缺少它。这可能是什么原因？怎么可能我确保所有环境变量都在 React 页面上可用？

Answer 1

在客户端，您必须以 REACT_APP_ 开始环境变量的名称。例如，将环境变量名称 HIRING 更改为 REACT_APP_HIRING 使其工作。

通过 this post, which links to here 找到了这个解决方案。

环境变量仅部分加载

Env vars only partially loading

reactjs

environment-variables

dotenv