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返回“ undefined”，为什么？我错过了什么？

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文件的内容并将其简化为一个对象，然后将其传递到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）

2 个答案: