Question

我使用create-react-app启动了一个应用程序。我有一个令牌，我不想推送给GitHub。

我已经运行yarn 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>
}

process.env.token是undefined。任何人都可以建议如何在前端使用溺爱或如何使用bootstrapped create-react-app来做到这一点？

Answer 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文件更惯用 - 需要{{但是，1}}或更高。

Answer 2

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

希望这对您有帮助:)

Answer 3

dotenv仅用于节点，不作出反应。

如果您没有连接后端，处理此客户端的一种方法是检查您的主机名：

if(hostname === 'realsite.com') {
  token = 'foo';
} else if(hostname === 'staging.realsite.com') {
  token = 'bar';
} else {
  token = 'baz';
}

否则，如果您有后端，请在.env文件中设置变量，并将其从后端传递到前端。根据应用程序的设置方式，有多种方法可以解决这个问题。

Answer 4

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

Answer 5

对于任何无法正常工作的人，请尝试

如果您希望git忽略它，则可以创建一个.env.local文件，而git将忽略它。查看您的.gitignore文件，您将找到`.env.local``

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

导入env变量反应前端

5 个答案: