导入环境变量反应前端答案

【问题标题】：importing env variable react front end导入环境变量反应前端
【发布时间】：2018-08-12 23:18:21
【问题描述】：

我已经使用create-react-app 引导了一个应用程序。我有一个我不想推送到 GitHub 的令牌。

我运行了yarn add dontenv，然后尝试将环境变量导入到我的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>
}

process.env.token 是undefined。谁能建议如何在前端使用令牌，或者我应该如何使用引导的 create-react-app 来做到这一点？

【问题讨论】：

标签： javascript reactjs ecmascript-6 environment-variables

【解决方案1】：

您不需要dotenv（而且我怀疑该库无论如何都可以在客户端应用程序中运行时工作）。

create-react-app actually provides this functionality out of the box，假设您使用的是react-scripts@0.5.0 或更高版本。

步骤如下：

在项目的根目录中创建一个.env 文件。
添加一个以前缀REACT_APP_开头的变量。
通过process.env访问它。

第二点是重要的部分 - 为避免您意外暴露变量，create-react-app 强制您使用前缀表示“是的，我知道我在做什么”。

如果您不打算将文件推送到源代码管理（如果其中包含密钥，您不应该这样做！），那么使用 .env.local 文件更习惯 - 这需要 react-scripts@1.0.0 或不过更高。

【讨论】：

注意：修改后需要重启服务器
@TOLULOPEADETULA 花了我一些时间来解决这个问题，谢谢！

【解决方案2】：

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

【讨论】：

【解决方案3】：

对于任何不能让它工作的人，试试这个

如果你想让 git 忽略它，你可以创建一个 .env.local 文件，git 会忽略它。查看你的 .gitignore 文件，你会发现`.env.local`

在您的根文件夹中创建.env.local 文件
打开您的.env.local
重要提示，所有环境变量必须以REACT_APP_ 开头
创建环境变量REACT_APP_BASE_URL
重新启动您的应用程序（杀死它）
要访问您编写的环境变量process.env.REACT_APP_BASE_URL

【讨论】：

【解决方案4】：

 - 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"

希望对您有所帮助:)

【讨论】：

这很有帮助，谢谢