运行时的Javascript前端配置

Question

我有一个vue.js SPA，我想将其部署在不同的服务器上，而无需为每个部署重新编译前端。 SPA连接到一个后端，该URL具有一个SPA未知的URL。有没有一种方法可以在运行时动态告诉前端，后端在哪里？

[许多文章和论坛主题建议仅针对不同的环境使用不同的配置文件并在构建时进行构建，但这对我来说不是一个选择，因为我根本不知道在构建时会将前端/后端部署在哪里它。

编辑：该项目是一个开源项目，所以我不能真正假设人们将如何部署它。我一直都“假定”它会部署在单独的子域中，前端在/处可访问，后端在/api处有代理，因为这是我设置服务器的方式。但是，我见过人们在与前端完全不同的子域（有时甚至具有不同的端口）上部署api，或者在子path甚至两者之间的混合环境中部署api。

到目前为止，我已经考虑过的事情：

1. 将配置放入conf.js中，该配置随后将通过window.config.backendUrl或类似内容公开后端网址，并通过index.html标签将该文件加载到我的<script>中]]
2. 与1略相似：将配置放入config.json，并在应用程序加载后向其提出获取请求，然后在window.config.backendUrl中公开其结果
3. 在我的<script>window.config.backendUrl = 'http://api.example.com'</script>中插入一个index.html。
4. 为前端提供定制的Web服务器（基于express或类似服务器），该服务器解析env或其他配置文件，然后从3动态创建<script>标签。>
5. 总是“假设”后端将在其中处理某种列表，例如“首先查看/api，然后查看./api，然后查看api.current-host.com，等等。
6. 将前端与后端捆绑在一起-这样，我将始终“知道”后端相对于前端的位置。

然而，所有这些选项在我看来似乎都有些拙劣，我认为必须有更好的方法。

我最喜欢的是第三个选项，因为它是可配置性和性能恕我直言之间的最佳折衷。

我有一个vue.js SPA，我想将其部署在不同的服务器上，而无需为每个部署重新编译前端。 SPA连接到一个后端，该URL具有一个SPA未知的URL。有没有办法...

Answer 1

如果我处于相同的情况，我会考虑以下两种方法：

1. 部署具有相同名称但内容不同的JSON文件-因此，前端始终可以通过对/config.json进行AJAX调用来获取其配置，但是此文件将取决于您部署的位置，并将在部署步骤中生成