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

Question

所以我想了解如何使用 .env 来保护我的 api 密钥和数据以用于我的登录身份验证。我遵循了 dotenv 包和 Whosebug .

的过程

我做了什么：

1.我安装了dotenv包

2. 在我的根文件夹中，我添加了一个只有一行的.env：

API_AUTH=http://myapilink.com

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

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

但是，console.logreturns'undefined'，这是为什么呢？我错过了什么？

Answer 1

您必须在环境变量前加上 REACT_APP_ 前缀。参见 here。

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

所以不只是 API_AUTH 而是 REACT_APP_API_AUTH。

并且它将作为 process.env.REACT_APP_API_AUTH.

暴露给您的应用程序

Answer 2

Dotenv 仅适用于服务器端。它需要一个环境来存储变量。在这里，我们提取 .env 文件的内容并将其缩减为一个对象，并将其传递给 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)
    ]
  };

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

Can't access variable key inside .env (dotenv package React)

authentication

api

environment-variables

reactjs

dotenv