环境变量-未定义

Question

我要使用environment variables。我做了一个自定义react app environment。

一切正常，应用程序正常运行，没有错误。但是.env文件中的变量给出了undefined，而process.env得到了empty object。

我在变量中添加了dotenv和REACT_APP前缀。

在webpack.config.js文件中，我从here添加了node: { fs: 'empty' }

这是我的configurations。

文件夹结构：

Answer 1

已解决的问题：

1. 卸载dotenv
2. 从主app.js文件中删除这两个文件：

const dotenv = require('dotenv')
dotenv.config();

1. 从--env脚本中删除标志npm start。

2. 从node: { fs: 'empty' }文件中删除webpack.config.js

3. 安装dotenv-webpack，然后按照指示进行操作。

不需要REACT_APP前缀。

修复了configuration files

Answer 2

您必须将REACT_APP放在想要的变量名之前

例如：/

REACT_APP_YOUR_VAR="something"

您不需要安装Dotenv或其他任何东西，因为React有自己的。

Answer 3

尝试https://www.npmjs.com/package/dotenv使用Marker变量

在您的入门JS文件中，添加以下代码段（也许是您的.env）

./src/assets/js/app.js

并重新启动您的应用。

Answer 4

您可以使用webpack.DefinePlugin

 plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development')
            }
        })
    ],

然后在您的代码中只需使用process.env.NODE_ENV访问ENV变量