reactjs 不同服务器上的不同.env文件?

vmdwslir  于 2023-03-22  发布在  React
关注(0)|答案(1)|浏览(175)

我开发了一个React(Vite)应用程序,它将在不同的服务器上运行并调用不同的API(URL)。例如https://api.serverA.comhttps://api.serverB.com
所以,据我所知,我可以使用.env文件来实现这一点。但我想做的和认为可能的是创建不同的. env文件,并将它们手动放置在服务器上。当React应用程序运行时,它会读取存储在该服务器上的. env文件。这可能吗?以及如何做到这一点?
当阅读到这一点时,通常会说你在src文件夹中创建了不同的. env文件,然后当你BUILD时,你的.env文件被使用。但是这样我就必须为服务器A做一个构建,为服务器B做另一个构建,依此类推。而不是做一个读取存储在服务器上的. env文件的构建。

zysjyyx4

zysjyyx41#

经过更多的研究,我发现答案似乎是No React不能读取外部的.env文件。当你构建你的应用程序时,它是“锁定”的(静态的)。阅读这篇文章:create react app cannot read environment variable after build
所以我的解决方案是检查当前的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!';

相关问题