Question

只是另一个反应问题。我想在全局存储一些URL信息，并按环境（开发，生产等）进行划分。

在网上搜索，通常的方法是反应自然支持的.env文件。

我创建了一个.env和一个.env.development，所以第一个是生产，第二个是开发文件。

在文件中，我将配置如下：

# .env.development
REACT_APP_TEST=newyork

我尝试用以下字符打印值：

console.log(process.env);
console.log(process.env.REACT_APP_TEST);

我得到的是：

Object
  NODE_ENV:"development"
  PUBLIC_URL:""

第二个是未定义的。

问题出在哪里？

Answer 1

如果您使用的是create-react-app，则需要更新env.js以在构建中包含新的环境变量。

函数getClientEnvironment(publicUrl)设置注入构建的环境变量供您使用。在这里，您可以像这样添加自定义env变量：

  {
    // Useful for determining whether we’re running in production mode.
    // Most importantly, it switches React into the correct mode.
    NODE_ENV: process.env.NODE_ENV || 'development',
    // Useful for resolving the correct path to static assets in `public`.
    // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
    // This should only be used as an escape hatch. Normally you would put
    // images into the `src` and `import` them in code to get their paths.
    PUBLIC_URL: publicUrl,
    CUSTOM: process.env.CUSTOM || 'fallback'
  }

<强>更新

如果您不使用CRA，可以使用webpack DefinePlugin执行相同的操作。

更新2：

@DimitarChristoff 指出您应该使用REACT_APP_*格式来声明env变量。如果你在env变量前加上REACT_APP_，CRA会自动将其取出并添加到Webpack DefinePlugin：

// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.
const REACT_APP = /^REACT_APP_/i;

Answer 2

比预期更简单。 .env文件必须放在项目的根目录中，而不是放在SRC文件夹中。

这就是全部！

Answer 3

在一般的Webpack案例中，您可以使用webpack的DefinePlugin来定义可在应用程序中访问的变量。

在CRA（Create-React-App）中，您可以在env.js文件中添加环境变量。

使用env.js与创建自己的config.js文件相同，您可以使用process.env创建配置变量或使用默认值。

ReactJS +环境变量

3 个答案: