Question

几个月前，我开始在业余时间创建一个开源项目，因此我已经用ReactJS编写了前端，并通过webpack devServer通过以下方式连接到后端API：

proxy: {
  '/api/**': {
    target: 'http://localhost:3001/project/backend',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

我可以使用如下API来获取数据：

fetchData () {
  window.fetch('/api/')
    .then(res => res.json())
    ...
}

现在，我正在尝试将我的项目部署在具有真实域名而不是localhost：3001的虚拟主机上，并且我真的不知道如何配置前端以将http://api.domain-name.com之类的地址用于后端。我知道我可以在我的fetchData方法中编写api.domain-name.com，但是我不想对该地址进行硬编码，因为我正计划将该项目供其他人使用，因此，显然，其中一些他们，甚至我也不想让他们处于这种状况，以手动更改前端试图到达后端的那些代码行。我希望可以使用配置文件以某种方式完成此操作，例如，在其中我可以编写类似HOST的内容：“ api.domain-name.com”，然后将其导入项目中并使用HOST常量。有人可以帮我提建议吗？

Answer 1

您应该使用ENV变量

REACT_APP_API_HOST = example.com纱线运行构建

Passing environment-dependent variables in webpack

生产中的ReactJS API主机

1 个答案: