不同服务器上的.env 文件不同？

Question

我开发了一个React（Vite）应用程序，它将在不同的服务器上运行并调用不同的API（URL）。就像 https://api.serverA.com、https://api.serverB.com。

据我了解，我可以使用 .env 文件来实现这一点。 但我想做并且认为可能的是创建不同的 .env 文件并将它们手动放置在服务器上。当 React 应用程序运行时，它会读取该服务器上存储的 .env 文件。这可能吗？以及如何做？

在阅读本文时，通常会说您在 src 文件夹中创建不同的 .env 文件，然后在构建时使用您的 .env 文件。但这样我就必须为服务器 A 进行构建，并为服务器 B 进行另一个构建，依此类推。而不是进行一次构建来读取服务器上存储的 .env 文件。

Answer 1

经过更多研究，我发现答案似乎是“No React can't read an external .env file”。当您构建应用程序时，它被“锁定”（静态）。 阅读这篇文章：创建反应应用程序在构建后无法读取环境变量

所以我的解决方案只是检查当前的 url 并动态创建 api 的链接。 像这样的东西：

export const APIURL = () => {
  //first check if we are in developement mode like localhost:3000
  if (import.meta.env.DEV) {
    return 'http://localhost:8888/mylocation/myapi/';
  }

  //do we have a build?
  if (import.meta.env.PROD) {
    //build the api url dynamic to current location
    if (window.location.hostname === 'localhost') {
      const urlParts = window.location.pathname.split('/');
      return window.location.origin + '/' + urlParts[1] + '/myapi/';
    } 
else return window.location.origin + '/myapi/';
  }

  return 'API-URL-IS-MISSING!';

Answer 2

使用react-inject-env
它将根据您的

env.js

文件创建一个

.env

文件。 然后在 HTML 中，使用简单的脚本标签加载

env.js

文件，然后加载应用程序的捆绑包（默认情况下，如果您使用捆绑器，它将最后加载）。 为此，您需要稍微修改一下使用 ENV 变量的方式。请参阅自述文件中的

Update Code

部分