使用 react、vue、angular 或其他基于 javascript 的框架开发的复杂应用程序与后端应用程序（java、nodejs、python 等）存在相同的问题或要求：如何读取配置？
在这里，我将列出一些处理 javascritpt 框架配置的方法，从简单到管理的解决方案。其中一些用于后端应用程序。
#1 全局变量
当我们谈论 javascript 框架时，只需在您的应用程序启动时创建全局变量，这将可用于您的所有脚本：
<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 为我们提供了多种机制，例如 DefinePlugin
new webpack.DefinePlugin({
API_BASE_URL: JSON.stringify(process.env.API_BASE_URL)
})
DefinePlugin 是直接文本替换。 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
优点：
- 设置或定义多个变量并在整个应用程序中使用它们的简单方法。
- 使用像 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、数据库或文件系统的属性
检查这个答案：
#4 集中和可管理的配置
主要思想是将您的所有配置、设置或属性放在一个站点中，并且您的所有应用程序都必须以安全的方式检索这些值。如今，从最终应用程序中检索此配置的最常用技术是对平台发布的 api rest 执行 http 请求。
这类平台是微服务架构的完美搭档。我还可以将它用于微前端。
这里有一些平台：
您可以将这些平台之一与 webpack 方法结合使用。因此，您可以在 webpack 的构建阶段或使用您的 C.I 服务器（如 jenkins）使用 api rest，而不是手动导出环境变量。
优势
缺点
- 与在与应用程序不同的另一台服务器上进行配置相比，配置独特的属性文件或手动环境导出更简单快捷。
#5 /你的网络设置
假设您的网络在 http://myapp.com 提供服务，您可以发布另一个端点，例如 http://myapp.com/settings。此端点将使用 AJAX 在 CLIENT SIDE 返回您的微前端或 Web 应用程序所需的所有设置。
在您的 javascript 应用程序中，在 入口点（通常是 React、vue 等中的 App.js）中，我的意思是在渲染机制之前，您可以使用 http://myapp.com/settings 并作为全局变量公开给你的申请。您还可以将其保存在可用的存储之一中，例如 localStorage、sessionStorage 等
优势
- 配置中的更改无需重新构建应用程序即可使用。只需执行页面刷新以在您的 javascript 中再次执行 入口点。
- 您可以在 /settings 的后端控制器中使用方法 #3
缺点
- 与 ajax http 请求相比，预硬编码变量会立即加载。