运行时的Javascript前端配置

我有一个vue.js SPA，我想在不同的服务器上部署它，而不必为每次部署重新编译前端。SPA使用SPA未知的url连接到后端。有没有一种方法可以在运行时动态地告诉前端后端在哪里

许多文章和论坛帖子建议只针对不同的环境使用不同的配置文件，并在构建时构建它们，但这不是我的选择，因为我根本不知道构建时前端/后端将部署在哪里

编辑：该项目是一个开源项目，所以我不能真正假设人们将如何部署它。我一直“假设”它将部署在一个单独的子域上，前端可以在

/

访问，后端可以在

/api

使用代理，因为我就是这样设置服务器的。 然而，我见过有人将api部署在与前端完全不同的子域（有时甚至使用不同的端口）上，或者部署在子路径上，或者部署在两者之间的混合路径上

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

将配置放入

conf.js

中，然后通过

window.config.backendUrl

或类似方式公开后端url，并从

标记将该文件加载到我的

index.html

中

与1稍有类似：将配置放在

config.json

中，并在加载应用程序后向其发出获取请求，然后在

window.config.backendUrl

插入

window.config.backendUrl='1！'http://api.example.com“

在我的

index.html

中

使用定制的web服务器（基于

express

或类似产品）为前端提供服务，该服务器解析env或其他配置文件，然后从3创建

标记。动态地

始终“假设”后端将在哪里，并提供某种列表，例如“首先查看

/api

，然后查看

/api

，然后查看

api.current host.com

等。”

将前端与后端捆绑在一起—这样我就可以始终“知道”后端相对于前端的位置

然而，在我看来，所有这些选择都有点老套，我认为必须有更好的方法

---

我最喜欢的是第三种选择，因为它是可配置性和性能IMHO之间的最佳权衡。

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

部署一个名称相同但内容不同的JSON文件-因此前端始终可以通过AJAX调用

/config.JSON

获取其配置，但此文件将取决于部署位置，并将在部署步骤中生成

使用具有固定/常量URL的单个API端点（与后端完全分离），以便前端始终调用此API端点，以在启动时获取其配置，并获取相应后端的实际URL，以便进一步操作

---

基本上（2）只是（1）中静态配置的动态版本。

如何部署前端？根据您的配置，另一个可行的解决方案是使用代理（您始终指向并调用适当的后端）或自定义DNS（您始终指向并返回正确的IP地址）。前端使用标准web服务器部署，比如nginx或apache。它应该只是一堆静态文件，你扔到服务器上的某个地方。我对最初的问题做了进一步的澄清，关于它将被部署到的环境。我喜欢这种方法，但是它需要整个spa等待，直到该请求完成。这本身是可以的，但并不理想。在我的第一个问题中，第一种和第二种方法有什么区别？第一种方法需要重建SPA。您的第二种方法与我的第一种方法相同，只是

window.config

expose除外。是的，SPA将不得不等到它获取配置——但这是为了避免在每次部署时重建而进行的权衡。如果您负担得起这一重建步骤，那么SPA的每个变体都会立即知道其后端URL。