使用 React、Vue、Angular 或其他基于 JavaScript 的框架开发的复杂应用程序与后端应用程序（Java、NodeJS、Python 等）具有相同的问题或要求：如何读取配置？
在这里，我将列出一些使用 javascritpt 框架配置的方法，从简单的解决方案到托管的解决方案。其中一些用于后端应用程序。
#1 全局变量
当我们谈论 javascript 框架时，只需在应用程序启动时创建全局 var，这将可用于您的所有脚本：
<html>
<header>
<meta charset="utf-8">
<title>This is title</title>
<script>
var myVar = "global value"; // Declare a global variable
</script>
<script>
console.log("from another script:"+myVar);
</script>
</header>
<body>
Hello world
</body>
</html>
当然，源代码中的硬编码 url 不是一个选项，但请理解这是下一个方法的入口点。几乎所有的人都是基于这种方法或者做类似的事情。
#2 网页包
Webpack 为我们提供了多种机制，例如定义插件
new webpack.DefinePlugin({
API_BASE_URL: JSON.stringify(process.env.API_BASE_URL)
})
The 定义插件 is a 直接文本替换。 Webpack 将查找标识符并将其替换为给定的字符串。以下示例说明了其工作原理。
您可以像使用全局变量一样使用此变量：
$.ajax({
type: "GET",
url: API_BASE_URL+'/odds?date=2019-01-19',
dataType: 'json',
success: function (data) {
...
}
});
}
这里有更多 webpack 机制：https://stackoverflow.com/a/40416826/3957754 https://stackoverflow.com/a/40416826/3957754
优点：
- 设置或定义多个变量并在整个应用程序中使用它们的简单方法。
- 使用像 jenkins 这样的 C.I 服务器，您可以设置所有配置并构建您的工件，然后部署它：
export API_BASE_URL=http://awesome.api.com
export ENDPOINT_DETAIL=/detail
export ENDPOINT_FAVOURITE=/favourite
export MODULES=user,guest,admin,configure
npm run build
缺点
- 变量在构建阶段注入。配置的更改将需要重新构建并重新部署您的应用程序。
#3 来自 SCM、数据库或文件系统的属性
检查这个答案：
- 在 CI 环境中更改应用程序配置的最佳方法是什么 https://stackoverflow.com/questions/51265146/what-is-the-best-way-to-change-application-configurations-in-a-ci-environment/51268633#51268633
#4 集中且可管理的配置
主要思想是将所有配置、设置或属性放在一个站点中，并且所有应用程序必须以安全的方式检索这些值。如今，从最终应用程序检索此配置的最常见技术是对平台发布的 API 其余部分执行 http 请求。
此类平台是微服务架构的完美合作伙伴。我还能够将它用于微前端。
这里有一些平台：
-
configurator https://github.com/software-architect-tools/configurator
- 这是一个 Nodejs 应用程序，允许您集中和管理所有应用程序的配置。
-
zookeeper https://zookeeper.apache.org
- http://www.therore.net/java/2015/05/03/distributed-configuration-with-zookeeper-curator-and-spring-cloud-config.html http://www.therore.net/java/2015/05/03/distributed-configuration-with-zookeeper-curator-and-spring-cloud-config.html
-
Spring Cloud http://spring.io/projects/spring-cloud-config#overview
- https://www.baeldung.com/spring-cloud-configuration https://www.baeldung.com/spring-cloud-configuration
- 这是一个 java spring 框架功能，您可以在其中创建带有配置的属性文件，并配置您的应用程序以读取它们。
-
Consul https://www.consul.io/intro
- Consul 是一个服务网格解决方案，提供具有服务发现、配置和分段功能的全功能控制平面。
- doozerd、etcd
您可以将这些平台之一与 webpack 方法结合使用。因此，您可以在 webpack 的构建阶段或使用 jenkins 等 C.I 服务器来使用 api 剩余部分，而不是手动导出环境变量。
优点
缺点
- 与在与应用程序不同的另一台服务器上进行配置相比，独特的属性文件或手动环境导出可以轻松快速地进行配置。
#5 /您网络中的设置
假设您的网站位于http://myapp.com http://myapp.com，您可以发布另一个端点，例如http://myapp.com/settings http://myapp.com/settings。此端点将返回您的微前端或 Web 应用程序所需的所有设置客户端 using AJAX.
在您的 javascript 应用程序中，在入口点（通常是React、Vue等中的App.js），我的意思是在渲染机制之前，你可以使用http://myapp.com/settings http://myapp.com/settings并将其作为全局变量公开给您的应用程序。您还可以将其保存在可用的存储之一中，例如 localStorage、sessionStorage 等
优点
- 配置中的更改可以随时使用，无需重建应用程序。只需执行页面刷新即可再次执行入口点在你的 JavaScript 中。
- 您可以在后端控制器中使用方法#3/设置
缺点
- 与 ajax http 请求相比，预先硬编码的变量会立即加载。
