环境变量 - 未定义

Question

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

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

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

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

这是我的配置。

文件夹结构：

Answer 1

你必须把REACT_APP放在你想要的变量名前面

例如：/

REACT_APP_YOUR_VAR="something"

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

Answer 2

问题解决了：

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

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

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

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

5. 安装dotenv-webpack ，然后按照那里的说明进行操作。

不需要REACT_APP前缀。

固定配置文件

Answer 3

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

在您的条目 JS 文件中添加以下代码片段（可能是您的./src/assets/js/app.js ）

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

并重新启动您的应用程序。

Answer 4

您可以使用 webpack.DefinePlugin

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

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