reactjs - 为什么我的环境变量使用 parcel 和 react 返回 undefined

Question

当我尝试使用 console.log(process.env) 返回空对象时，我正在 React 和 Parcel 中开发一个项目，但如果我向其添加 API_Key，它将返回未定义

谁能告诉我哪里出了问题？为什么我的环境变量返回未定义

这是我的包 json :

"scripts": {
    "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"
},

这是我的 .env 文件，它位于 .json 包旁边REACT_APP_API_KEY:"我的 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

引用.env USAGE documentation从 Parcel .env documentation 指出, 它使用 dotenv

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

作为pointed here通过@Emanuele，

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

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"));

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

您可以在 Sandbox 中观看演示。

👆 沙箱使用parceljs。