javascript 导入环境变量反应前端

importing env variable react front end

提问by peter flanagan

I have bootstrapped an app using create-react-app. I have a token that I don't wish to push to GitHub.

我已经使用create-react-app. 我有一个不想推送到 GitHub 的令牌。

I have ran yarn add dontenvand then tried to import the env variable to my App.jsfile.

我已经运行yarn add dontenv，然后尝试将 env 变量导入到我的App.js文件中。

My code looks like this

我的代码看起来像这样

.env

.env

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

Then my app.jsfile looks like this:

然后我的app.js文件看起来像这样：

app.js

应用程序.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.tokenis undefined. Can anyone advise how to use token in the front end or how I should do this using a bootstrapped create-react-app?

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

回答by Joe Clay

You don't need dotenv(and I doubt that library will work at runtime in a client-side application anyway).

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

create-react-appactually provides this functionality out of the box, assuming you're using [email protected]or higher.

create-react-app假设您正在使用[email protected]或更高版本，实际上提供了开箱即用的此功能。

The steps are as follows:

步骤如下：

• Create a .envfile in the root of your project.
• Add a variable, starting with the prefix REACT_APP_.
• Access it via process.env.

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

That second bit is the important part - to avoid you exposing variables by accident, create-react-appforces you to use a prefix as a way of saying "yes, I know what I'm doing".

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

If you're not intending to push the file to source control (which you shouldn't be, if it's got secret keys in!), then using an .env.localfile is more idiomatic - that requires [email protected]or higher, though.

如果您不打算将文件推送到源代码管理（您不应该这样做，如果它有秘密密钥！），那么使用.env.local文件更惯用 - 但这需要[email protected]或更高。

回答by Cyrus Zei

for anybody that does not get this to work, try this

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

if you want git to ignore it you can create a .env.localfile and git will ignore it. Look at your .gitignore file and you will find the `.env.local``

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

1. create .env.localfile in your root folder
2. Open your .env.local
3. IMPORTANT, all your environment variables MUST start with REACT_APP_
4. Create an environment variables REACT_APP_BASE_URL
5. Restart your application (kill it)
6. To access environment variables you write process.env.REACT_APP_BASE_URL

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

回答by Nastro

You don't have to use any code logic for this purpose. You have to use different .env files for production and development if you want to serv different values for different environments. See my answer here

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