webpack - 具有服务器端配置的静态 javascript 应用程序

Question

我正在构建一个没有服务器端渲染的 vue 应用程序（使用 vue cli）。

但是，应用程序需要一些无法在构建时硬编码或生成的配置，相同的构建部署在许多不同的环境（QA、preprod、prod 等）上。

我正在尝试找到访问配置的更好方法。

我正在寻求有关如何实现这一目标的建议/想法。

配置数据示例

• 后端 api 的 url
• 身份验证配置

注意事项

• 该应用程序将部署在 Azure 应用程序服务上。客户端和服务器部分必须由同一主机提供服务。
• 应该可以通过 Azure 门户 (appSettings) 更改配置。这就是我们制作的几乎所有应用程序的工作方式，我们希望我们的运营团队为每个应用程序以相同的方式工作。
• 我们通常用 C# 编写服务器端代码。这是我们的开发人员最了解的，但我对另一种解决方案持开放态度。
• 我们还将使用服务器部分来生成CSP标头
• 设置端点必须可以从同一主机下的已知路由访问，因此我可以在不需要任何参数的情况下请求它，例如GET /settings.json

到目前为止我的想法

在解决方案中拥有一个 node.js 服务器以及客户端代码。

优点：

• 一切都在同一个解决方案中，一次构建，一次部署。

缺点：

• 我不确定如何使 vue 应用程序（客户端）和服务器应用程序之间的限制清晰明了。
• 不知道如何指导 webpack 关于这一点。

用于提供配置的 C# Web 应用程序。我可以将客户端应用程序捆绑在该网站下并进行部署。

优点：

• 服务器端代码和客户端代码明确隔离
• 我们可以使用我们现在最适合服务器端的技术（在本例中为 C#）

缺点：

• 在构建时合并两个项目似乎有点奇怪（虽然有可能，但我试过了）

标签： webpackazure-web-app-service

Answer 1

您可以通过 rest api 访问配置。

它与您使用任何语言的服务器无关，您可以选择任何您想要的。

步骤 1. 在门户上创建应用程序设置。

步骤 2.列出应用程序设置。

第 3 步。您只需要key通过 javascript 代码从属性中获取。