Create-React-App：.env 文件无法正确解析答案

【问题标题】：Create-React-App: .env file doesn't parse correctlyCreate-React-App：.env 文件无法正确解析
【发布时间】：2018-12-23 19:57:02
【问题描述】：

我的 CRA 项目没有解析我的环境变量。我在文档中看到了这一点：

默认情况下，您将为您定义 NODE_ENV，以及任何其他以 REACT_APP_ 开头的环境变量

下面是一些测试代码：

// .env in the project root folder
REACT_APP_GOOGLE=google.com
REACT_APP_API_POST_URL=http://localhost:4000/api/

// App.js
import dotenv from 'dotenv';

  componentDidMount() {
    if (dotenv.error) {
      console.log('dotenv.error', dotenv.error);
    } else { console.log('dotenv.parsed', dotenv.parsed); // undefined
    }
  }


// App.js insider render()
<button
   onClick={e => {
   e.preventDefault();
   console.log("process.env", process.env); // 
// {NODE_ENV: "development", PUBLIC_URL: ""}
// NODE_ENV: "development"
// PUBLIC_URL: ""             
console.log("process.env.NODE_ENV", process.env.NODE_ENV); // development               
console.log("process.env.REACT_APP_GOOGLE", process.env.REACT_APP_GOOGLE); // undefined
    }}
    >log .env</button>

有人知道它为什么不解析环境变量吗？

【问题讨论】：

你安装了什么版本的react-scripts？
来自 package.json："react": "^16.6.3", "react-dom": "^16.6.3", "react-scripts": "2.1.1",

标签： reactjs environment-variables

【解决方案1】：

这是你的组件：

import React, { Component } from 'react';
import './App.css';

const googleEnvVariable = process.env.REACT_APP_GOOGLE;

class App extends Component {
  render() {
    return <div className="App">{googleEnvVariable}</div>;
  }
}

export default App;

这是你的 .env

REACT_APP_GOOGLE=hereisyourenvvar

你应该看到这里是你的envvar

编辑：更新的答案显示在屏幕上而不是 console.log...

【讨论】：

好的，我在 render() 外面做了这个：googleEnvVariable = process.env.REACT_APP_GOOGLE; 然后在 render() 里面：<div>{this.googleEnvVariable}</div> 没有显示。我猜它仍然未定义
@SeanDezoysa 我不确定我是否理解...所以您已将 API_KEY 替换为 googleVairable 所以只需 console.log googleVariable 您将在控制台中看到它...
应该没有this@SeanDezoysa
@SeanDezoysa 如果您使用的是 create-react-app，则无需安装或导入 detenv... 它已内置... 您只需在src 目录...按照我向您展示的那样定义您的变量...将它分配给您 App.js 中的一个常量，就像我向您展示的那样，它应该可以工作...
好的，开始工作了。我将 .env 文件放在项目根目录中并重建了应用程序。我怀疑不重建是导致大多数问题的原因。谢谢

【解决方案2】：

从您提供的代码来看，您似乎忘记调用config 函数（除非您没有显示它）。如果您希望实现 .env，您必须在项目的顶层执行以下操作：

import dotenv from 'dotenv';
// Load ENV vars
const dotEnvOptions = {
    path: 'env/dev.env' //Example path relative to your project folder
}

dotenv.config(dotEnvOptions)

要找出问题所在，您可以打开日志记录以帮助调试某些键或值未按预期设置的原因：

dotenv.config({ debug: true })

从那里，如果无法识别路径/变量，它将在控制台中打印：

如果您没有看到任何内容，则表示您的路径错误或代码未执行

【讨论】：

我的 .env 文件在项目根目录下，这段代码有错误吗？渲染 const 显示“没有找到”const dotEnvOptions = { path: './.env' }; dotenv.config(dotEnvOptions); const googleEnvVariable = process.env.REACT_APP_API_POST_URL || 'nothing found';
也尝试将路径设置为 '.env' 和 '/.env' 没有成功
好吧，只需输入path: '.env'，它应该可以解决问题。好的，神经元
变量中的引号应该在这里吗？："http://localhost:4000/api/
不！我已经删除了它们。但它仍然没有拾取 ENV 变量