导入环境变量反应前端

Posted 2023-02-24

【中文标题】导入环境变量反应前端

【英文标题】：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 来做到这一点？

【参考方案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"

希望对您有所帮助:)

【讨论】：

这很有帮助，谢谢