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

Question

所以我试图了解如何使用 .env 来保护我的 api 密钥和数据以用于我的登录身份验证。我已经关注了 dotenv 包和 stackoverflow 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 返回“未定义”，这是为什么呢？我错过了什么？

Answer 1

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

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

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

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

Answer 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)
    ]
  };