反应环境变量.env返回未定义

Question

我正在构建一个反应应用程序，我需要从我的 api 中获取数据，现在我想将 api url 存储为环境变量。我有我的 .env 文件，我安装了 dotenv，这是我的代码 process.env.API_URL 返回未定义。

 import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Home from '../src/components/Home'
import dotenv from  'dotenv'
import path from 'path'

class App extends Component {
  render() {
    console.log(process.env.API_URL)
    return (
      <div>
        <Home/>
      </div>
    );
  }
}

export default App;

原文由 David whyte 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这里要注意三点

1. 该变量应以 REACT_APP_ 为 前缀

例如： REACT_APP_WEBSITE_NAME=hello

1. 您需要 重新启动 服务器以反映更改。

2. 确保您的 根 文件夹中有 .env 文件（与您的 package.json 相同的位置），而不是在您的 src 文件夹中。

之后你可以像这样访问变量 process.env.REACT_APP_SOME_VARIABLE

附加提示

1. 无需将变量值用单引号或双引号引起来。
2. 不要在每行的末尾放置分号 ; 或逗号 , 。

在这里 阅读更多（我自己的帖子）和官方 文档

原文由 kiranvj 发布，翻译遵循 CC BY-SA 4.0 许可协议