4

所以我试图了解如何使用 .env 来保护我的登录身份验证的 api 密钥和数据。我已经遵循了 dotenv 包的过程和 stackoverflow 的答案。

我做了什么：

1. 我安装了 dotenv 包

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

API_AUTH=http://myapilink.com

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

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

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

4

2 回答 2

15

您必须在环境变量前面加上REACT_APP_. 见这里。

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

因此，与其说API_AUTH是相反，不如说是REACT_APP_API_AUTH。

它将以process.env.REACT_APP_API_AUTH.

于 2019-01-13T12:55:15.810 回答
3

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)
    ]
  };
于 2019-01-13T13:00:12.477 回答