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

Question

我目前正在使用具有 API 密钥的第 3 方 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
    })
  ]
  ...
};