Javascript 导入环境变量react前端

我已使用

create react app

启动了一个应用程序。我有一个令牌，我不想推到GitHub

我已经运行了

warn add dontenv

，然后尝试将env变量导入我的

App.js

文件

我的代码如下所示

.env

TOKEN=**************

然后我的

app.js

文件如下所示：

app.js

import React from 'react';
import ReactDOM from 'react-dom';
require('dotenv').config();

const App = props => {
    console.log(process.env.token);
    return <p>Test</p>
}

从“React”导入React；
从“react dom”导入react dom；
require（'dotenv'）.config（）；
const App=props=>{
日志（process.env.token）；
回归检验

}

---

process.env.token

未定义。有人能建议如何在前端使用令牌，或者我应该如何使用引导的create-react应用程序来实现这一点吗？

您不需要

dotenv

（我怀疑库在运行时在客户端应用程序中能否正常工作）

，假设您正在使用

react-scripts@0.5.0

或更高版本

步骤如下：

• 在项目的根目录中创建一个

  .env

  文件
• 添加一个变量，以前缀

  REACT\u APP\u

  开头
• 通过

  process.env

  访问它

第二点很重要——为了避免您意外地暴露变量，

create react app

强制您使用前缀作为表示“是的，我知道我在做什么”的方式

---

如果您不打算将文件推送到源代码管理（如果它有密钥，您不应该这样做！），那么使用

.env.local

文件更为惯用，这需要

响应-scripts@1.0.0

或更高版本。

您不必为此使用任何代码逻辑。如果要为不同的环境提供不同的值，则必须为生产和开发使用不同的.env文件。查看我的答案

如果有人无法实现此功能，请尝试此功能

如果希望git忽略它，可以创建一个

.env.local

文件，git将忽略它。查看你的.gitignore文件，你会发现“.env.local”``

在根文件夹中创建

.env.local

文件

打开您的

.env.local

重要信息，您的所有环境变量必须以

REACT\u APP\开头

创建环境变量

REACT\u APP\u BASE\u URL

重新启动应用程序（杀死它）

要访问环境变量，请编写

process.env.REACT\u APP\u BASE\u URL

---

希望您会发现这一点很有帮助：）

注意：完成这些操作后，您需要重新启动服务器corrections@TOLULOPEADETULA我花了点时间才弄明白，谢谢！

 - Create .env file in root folder

 - Open to .env file

     --> REACT_APP_API_KEY= API KEY
    **NOTE** starting with the prefix REACT_APP_ (IMPORTANT)

 - Access it use process.env
  eg  const  {REACT_APP_API_KEY,REACT_APP_TEMPLATE_ID,REACT_APP_SERVICE_ID} = process.env

 - And use with template string
 eg emailjs.send(`${REACT_APP_SERVICE_ID}`,`${REACT_APP_TEMPLATE_ID}`, values, `${REACT_APP_API_KEY}` )
      .then((response) => {
         console.log('SUCCESS!', response.status, response.text);
      }, (err) => {
         console.log('FAILED...', err);
      });


When you do any changes or need to create at .env file don't forget to restart  
appliction "npm start"