环境变量 - 未定义答案

【问题标题】：Environment variables - undefined环境变量 - 未定义
【发布时间】：2020-03-27 23:56:59
【问题描述】：

我想使用environment variables。我自定义了react app environment。

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

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

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

这是我的configurations。

文件夹结构：

【问题讨论】：

尝试npmjs.com/package/dotenv 使用.env 变量
添加了dotenv同样的结果。
REACT_APP 前缀是 create-react-app cli 的功能，而不是 react。试试这个：npmjs.com/package/dotenv-webpack
@grecdev 一篇非常好的文章，用于为 React 服务器端和客户端应用程序设置 .env 文件。 medium.com/@trekinbami/…
@grecdev 另外我可以看到您在启动脚本中的 --env 之后没有使用任何参数，这可能会覆盖 .env 文件中定义的所有变量，在脚本中使用 --env 或使用.env 文件。

标签： javascript node.js reactjs webpack environment-variables

【解决方案1】：

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

例如：/

REACT_APP_YOUR_VAR="something"

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

【讨论】：

【解决方案2】：

问题已解决：

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

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

从 npm start 脚本中删除标志 --env。
从webpack.config.js 文件中删除node: { fs: 'empty' }
安装dotenv-webpack，然后按照那里的说明进行操作。

不需要REACT_APP 前缀。

固定configuration files

【讨论】：

我曾经遇到过这样的问题，我使用 dotenv 解决了它，它在开发模式下有效。但是当我尝试为生产构建时，它失败了。
嗯，让我在生产中也检查一下
适用于development 和production

【解决方案3】：

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

在你的入口JS文件中添加下面的代码sn-p（可能是你的./src/assets/js/app.js）

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

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

【讨论】：

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

【解决方案4】：

你可以使用 webpack.DefinePlugin

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

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

【讨论】：

已解决，dotenv-webpack 更容易清洁。至少对我而言。