为什么我的环境变量显示为未定义？

Question

我正在尝试使用Supbase从表中获取数据。 当我尝试将 URL 和密钥存储在 .env 文件中时，它返回为未定义。

文件：App.js

import React, { useEffect } from "react";
import ButtonsSection from "./ButtonsSection";
import Header from "./Header";
import InputsSection from "./InputsSection";
import ResultsSection from "./ResultsSection";

export default function App() {
  useEffect(() => {
    console.log(process.env.REACT_APP_SUPABASE_URL);
  }, []);

  return (
    <div>
      <Header />
      <InputsSection />
      <ButtonsSection />
      <ResultsSection />
    </div>
  );
}

文件：Database.env

REACT_APP_SUPABASE_URL='https://**********.supabase.co'
REACT_APP_SUPABASE_ANON_KEY='***************.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InF2bW56a2xka25hZG1wcmZtc3JqIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTU0MDQ4NDQsImV4cCI6MTk3MDk4MDg0NH0.Th_x*******************************'

Answer 1

假设您使用的是 create-react-app。 文件名应该是“.env”而不是“Database.env”，它应该在项目的根文件夹中。

Answer 2

• 第 1 步 - 安装 dotenv npm install dotenv
• 第 2 步 - 在根目录中创建一个没有名称但扩展名为.env的文件
• 第 3 步 - 导入“dotenv/config”（ES6 语法）

您的问题似乎是您没有导入dotenv/config并且您的文件名是 database.env 这是不正确的，只需将其命名为.env