导入env变量反应前端

Question

我使用了一个app来引导它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实际上提供了开箱即用的功能,假设您正在使用react-scripts@0.5.0或更高.

步骤如下:

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

第二位是重要的部分 - 为了避免你意外地暴露变量,create-react-app强迫你使用前缀作为一种说"是的,我知道我在做什么"的方式.

如果你不打算将文件推送到源代码控制(你不应该把它,如果它有秘密密钥!),那么使用.env.local文件更加惯用 - 但需要react-scripts@1.0.0或更高.

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

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

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

1. .env.local在您的根文件夹中创建文件
2. 打开你的 .env.local
3. 重要的是，您所有的环境变量都必须以 REACT_APP_
4. 创建环境变量 REACT_APP_BASE_URL
5. 重新启动您的应用程序（杀死它）
6. 访问您编写的环境变量 process.env.REACT_APP_BASE_URL