环境变量在 React 应用程序中不起作用

Question

我目前正在与第 3 方 API 合作，它有一个 API 密钥。我打算将它存储在一个 .env 文件中并且一直在这样做，但是当我尝试使用 process.env.

访问它时它总是显示为 undefined

我的 .env 文件是 keys.env，它在我的 React JS 应用程序的 src 目录之外。我已经重新启动了我的开发服务器，清理了 npm 的缓存，但是我的 React JS 应用程序根本无法识别 .env 变量。

我的文件结构：

|-node_modules<br>
|-public<br>
|-src<br>
|  .gitignore<br>
|  keys.env<br>
|  package-lock.json<br>
|  package.json <br>

我的 keys.env 文件：

REACT_APP_TEST_KEY=somekey

如何访问 .env 变量：

process.env.REACT_APP_TEST_KEY

输出：

undefined

Answer 1

我认为你需要配置 webpack 文件才能使用 keys.env 因为环境的文件名默认是 .env

// webpack.config.js
const Dotenv = require('dotenv-webpack');
 
module.exports = {
  ...
  plugins: [
    new Dotenv({
        path: './some.other.env' // default is .env
    })
  ]
  ...
};

环境变量在 React 应用程序中不起作用

Environment variables are not working in React app

environment-variables

node.js

npm

reactjs