为什么我的环境变量在反应中未定义？答案

【问题标题】：Why are my env variables undefined in react?为什么我的环境变量在反应中未定义？
【发布时间】：2021-04-14 09:33:06
【问题描述】：

我想将我的 key 和 base 变量保留在 .env 中，但是当我将它们分配给 .env 和 console.log 时，它的变量是未定义的。

应用文件

# App.js
import './style/App.css';
import Main from './components/Main';
import './style/Search.css'
import { useState } from 'react';
import Error from './components/Error';
import api from './config'

function App() {
  console.log(process.env.REACT_APP_KEY)


  return (
    <div>
       
    </div>
  );
}

export default App;

环境文件

# .env

REACT_APP_KEY=somevalue123
REACT_APP_BASE=somelink

【问题讨论】：

React 在浏览器中运行时，没有process。
@FZs 如果 OP 正在使用捆绑程序，那么 process.env 很可能存在。只是他可能想要使用这样的东西-> webpack.js.org/plugins/environment-plugin
当我在 netlify 上托管它并添加环境变量时，它也不起作用。

标签： javascript reactjs environment-variables

【解决方案1】：

所以我解决这个问题的方法是执行以下操作......

安装 dotenv 包“npm i dotenv”
然后你必须导入它并配置它，如下所示

从“dotenv”导入 dotenv
dotenv.config();
3. 那么你应该可以使用你的环境变量了

注意：每次导入新的环境变量时都应该重启 npm 服务器

【讨论】：