运行时的 Javascript 前端配置

Question

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

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

编辑：该项目是一个开源项目，因此我无法真正假设人们将如何部署它。我总是“假设”它将部署在一个单独的子域上，前端可以访问/，后端可以通过代理访问/api，因为这就是我设置服务器的方式。然而，我见过人们将 api 部署在与前端完全不同的子域（有时甚至使用不同的端口）或子路径上，甚至是两者的混合上。

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

1. 将配置放入 a 中，conf.js然后通过或类似的方式公开后端 url ，并从标签window.config.backendUrl中加载该文件index.html<script>
2. 与 1. 有点相似：将配置放入 a 中config.json，并在应用程序加载后向其发出获取请求，然后将其结果公开在window.config.backendUrl
3. <script>window.config.backendUrl = 'http://api.example.com'</script>在我的index.html.
4. 使用定制的 Web 服务器（基于express或类似）为前端提供服务，该服务器解析 env 或不同的配置文件，然后<script>动态创建来自 3. 的标签
5. 始终“假设”后端将在哪里进行某种列表的工作，例如“首先查看/api然后./api查看api.current-host.com等等”。
6. 将前端与后端捆绑在一起——这样我就总是“知道”后端相对于前端的位置。

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

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

Answer 1

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

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

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

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