環境變量在 React 應用程序中不起作用

Question

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