Question

我正在使用ReactJS并尝试从.env文件中读取一些配置。我遵循此page的指示，但对我而言无效。

这是我的Test.js：

import React from 'react';
require('dotenv').config()


class Test extends React.Component {

    constructor(props) {
        super(props);

        this.state={
            user:process.env.DB_USER,
            pass:process.env.DB_PASS
        }
    }

    render() {
        return (
            <div>
                <p>Test</p>
                {this.state.user}
                {this.state.pass}
            </div>
        );
    }
}

export default Test;

这是我的.env文件：

DB_USER=test
DB_PASS=test

这是我的文件夹结构：

在我的页面上，我仅收到以下文本：“测试”。因此，我认为该应用程序无法从.env文件获取值。

这里有人可以帮助我从.env文件读取配置吗？谢谢你。

Answer 1

假定您将create-react-app用于项目样板。您可以将REACT_APP前缀添加到环境变量中。首先，在您的根目录（src文件夹外部）中创建一个.env文件。在您的.env文件中

REACT_APP_USERNAME=lorem

例如，您可以使用process.env.REACT_APP_USERNAME在项目中的任何位置调用它

console.log(process.env.REACT_APP_USERNAME)

我希望这能奏效，祝你好运

Answer 2

1）ReactDocs如果您使用create-react-app作为样板

1.1＃.env文件

REACT_APP_SOME_NAME=something

名称必须以REACT_APP _ 开头

1.2访问ENV变量

<p>{process.env.REACT_APP_SOME_NAME}</p>

1.3 npm运行开始

使用npm run start在.env文件中添加变量后，重新启动应用程序

2）如果不使用create-react-app

2.1） npm install dotenv --save

2.2）接下来，将以下行添加到您的应用中。

require('dotenv').config()

2.3），然后在应用程序的根目录中创建一个.env文件，并向其中添加变量，并在使用npm start添加变量之后重新启动应用程序。

// contents of .env

REACT_APP_API_KEY = 'my-secret-api-key'

2.4）最后，将.env添加到您的.gitignore文件中，以便Git忽略它，并且它永远不会在GitHub上结束。

Answer 3

假设您正在从项目的根目录运行应用程序，那么我的理解是，您需要像这样将weight文件的路径指定为.env：

src

React无法从.env读取配置

3 个答案: