为什么我的环境变量使用包裹返回未定义并做出反应

Question

当我尝试使用 React 和 Parcel 进行项目时，console.log(process.env) 返回一个空对象，但如果我向其中添加 API_Key 将返回 undefined

谁能告诉我怎么了？为什么我的环境变量返回 undefined

这是我的 json 包：

    "clear-build-cache": "rm -rf .cache/ dist/",
    "dev": "parcel src/index.html",
    "build": "parcel build index.html",
    "dev:mock": "cross-env OPEN-INV=mock parcel src/index.html",
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
    "test": "echo \"Error: no test specified\" && exit 1"
  `},

here is my .env file which is next to the package .json
REACT_APP_API_KEY:"my api key"


console.log(process.env) // {}
console.log(process.env. REACT_APP_API_Key)// undefined

Answer 1

有两个问题。

1。更改 .env 变量名称、值声明

环境文件，.env 需要 NAME=VALUE 格式的值和名称。

所以不是

REACT_APP_API_KEY:"my api key"

你需要做的

REACT_APP_API_KEY=MyAPIKey

参考Parcel .env documentation指向的.env USAGE documentation，它使用dotenv

2。您需要完全按照您声明的方式引用环境变量。

作为@Emanuele 的pointed here，

您需要完全按照声明的方式引用环境变量名称。 所以不是

process.env. REACT_APP_API_Key

将值引用为

process.env. REACT_APP_API_KEY

---

---

---

---

---

---

* 更新：使用dotenv * 配置环境变量

当您使用 Parcel 时，您需要手动加载环境变量，使用 dotenv。 （create-react-app 会自动处理）。

安装dotenv后，需要调用config()解析.env文件才能作为process.env.REACT_APP_API_KEY使用。

参考下面的示例代码

.env

REACT_APP_API_KEY=API key from .env file

App.js

import React from "react";
import { render } from "react-dom";
import dotenv from "dotenv";

dotenv.config();

function App() {
  console.log(`process.env`, process.env);
  return <h1>{process.env.REACT_APP_API_KEY}</h1>;
}

render(<App />, document.getElementById("app"));

您可以使用环境变量值查看控制台输出和显示的标题。

您可以在沙盒中关注演示。

? 沙盒使用parceljs。

Answer 2

首先，您使用的是 REACT_APP_API_Key 而不是 REACT_APP_API_KEY。可能是问题所在。