在.env文件React应用程序中设置PUBLIC-URL

Question

嗨，我是反应应用程序的新手。我想在 .env 文件中设置 Public_URL .

.env 文件（我设置了 url 链接）

PUBLIC_URL="http://localhost:8000/api";

Login.tsx 文件

const response = await fetch("/login", {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            credentials: 'include',
            body: JSON.stringify({
                userName,
                password
            })
            
        });

当我启动应用程序时，我的应用程序应该可以正常工作。但在我的登录页面中，我将登录按钮我的 Url 调用提交到 http://localhost:3000/login。但我需要设置 http://localhost:8000/api 。我不知道如何设置它。请发送正确的示例。

包.json

 "scripts": {
    "start": "env-cmd -f .env react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Answer 1

您可以在 .env 文件中为端点设置另一个变量，例如：

REACT_APP_API_ENDPOINT=http://localhost:8000/api

PUBLIC_URL

已用作 React 获取应用程序依赖项的基本 url。

在您的组件中，您可以通过以下方式获取环境变量：

const { REACT_APP_API_ENDPOINT } = process.env;

const response = await fetch(`${REACT_APP_API_ENDPOINT}/login`, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  credentials: "include",
  body: JSON.stringify({
    userName,
    password,
  }),
});

Answer 2

PUBLIC_URL 参考文档

https://create-react-app.dev/docs/using-the-public-folder/

它必须用于外部网络资源，如图标、图像、CSS。它用于当前网页链接的内部参考。

Answer 3

您可以使用自定义环境变量来实现此目的。 另请注意，您的自定义环境变量应以 REACT_APP_ 前缀开头。这是访问应用程序中的变量所必需的。

示例：

Answer 4

**.env File**

REACT_APP_populationInYears_API_URL = 'https://datausa.io/api/data?drilldowns=Nation&measures=Population'

**populationInYears.js File**

import React, { useState } from 'react'

const PopulationInYears = () => {

  const apiUrl = process.env.REACT_APP_populationInYears_API_URL;

  async function fetchApiData() {
    const apiData = await fetch(apiUrl)
    console.log(apiData);
    const data = await apiData.json();
    console.log(data);
  }

  useState(() => {
    fetchApiData();
  }, []);

  return (`enter code here
    <div>PopulationInYears</div>
  );
};

export default PopulationInYears;