无法访问 .env 中的变量键（dotenv 包 React）

Posted 2023-02-22

【中文标题】无法访问 .env 中的变量键（dotenv 包 React）

【英文标题】：Can't access variable key inside .env (dotenv package React)

【发布时间】：2019-06-07 16:53:35

【问题描述】：

所以我试图了解如何使用 .env 来保护我的 api 密钥和数据以用于我的登录身份验证。我已经关注了 dotenv 包和 *** answer here 的过程。

我做了什么： 1.我安装了dotenv包 2. 在我的根文件夹中，我添加了一个只有一行的 .env：

API_AUTH=http://myapilink.com

3。在我的 App.js 中，我添加了以下行：

require('dotenv').config()
console.log(process.env.API_AUTH)

但是，console.log 返回“未定义”，这是为什么呢？我错过了什么？

【问题讨论】：

您是否使用 create-react-app 生成了您的项目？

我相信我做到了。我目前正在一个我已经工作了一个月的反应应用程序上对此进行测试。但当时，我遵循 Reacts 指南来创建我的 React 应用程序

【参考方案1】：

你必须在你的环境变量前面加上REACT_APP_。见here。

注意：您必须创建以开头的自定义环境变量 REACT_APP_。 除了NODE_ENV 之外的任何其他变量都将被忽略 避免意外暴露机器上的私钥，这可能 有相同的名字。更改任何环境变量都需要 如果开发服务器正在运行，请重新启动它。

所以不仅仅是API_AUTH，而是REACT_APP_API_AUTH。

并且它将以process.env.REACT_APP_API_AUTH 的身份向您的应用公开。

【讨论】：

使用 REACT_APP_ 前缀更改变量名后，我仍然未定义。但是，我现在 console.log(process.env) 看看返回的内容并得到以下信息：Object NODE_ENV: "development" PUBLIC_URL: "" __proto__: Object 我不知道这是否有帮助。

@CédricBloem 更改后您是否重新启动了服务器？如果这不起作用，请尝试将您的 .env 更改为 .env.development 并重新启动它。

我做到了，它奏效了。不敢相信“你有没有尝试过再次打开和关闭它”：）谢谢！

@CédricBloem 在使用 CRA 时，您不需要 dotenv。反正它是捆绑在那里的。

是的，针对每一个计算机问题的久经考验的解决方案。:)。不客气。

【参考方案2】：

Dotenv 仅适用于服务器端。它需要一个环境来存储变量。在这里，我们提取 .env 文件的内容并将其缩减为一个 Object 并将其传递给 Webpack 的 DefinePlugin 以便我们以后使用（process.env.API_AUTH）：

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

module.exports = () => 
  const env = dotenv.config().parsed,
    envKeys = Object.keys(env).reduce((prev, next) => 
      prev[`process.env.$next`] = JSON.stringify(env[next]);
      return prev;
    , );

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

【讨论】：

感谢您的回答！但显然我犯的错误是忘记为我的变量使用“REACT_APP_”前缀。

在那个中，你不需要前缀。

环境变量在#React App 中很容易使用 CRA 完成。但是，我遇到了使用#webpack 的问题，您的解决方案已解决。但是，有#EnvironmentPlugin，它等效于#DefinePlugin，但代码更少。 Reference