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

Question

我的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>

有人知道为什么不解析env变量吗？

Answer 1

这是您的组成部分：

ResponseEntity<Transaction> response = testRestTemplate.exchange("/api/transaction/{transaction-id}/return", HttpMethod.PATCH, null,Transaction.class, 1);

这是您的.env

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;

您应该看到hereisyourenvvar

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

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

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

如果您什么都没看到，则说明您的路径错误或代码未执行