导入环境变量反应前端

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

我已经跑了yarn add dontenv然后尝试将环境变量导入到我的App.js file.

我的代码看起来像这样

.env

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

Then my 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 is undefined。任何人都可以建议如何在前端使用令牌或者我应该如何使用引导的 create-react-app 来做到这一点？

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

create-react-app实际上提供了开箱即用的此功能 https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env，假设您正在使用[email protected] /cdn-cgi/l/email-protection或更高。

步骤如下：

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

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

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