如何在TypeScript/Webpack SPA运行时读取VSTS发布变量？

我之前处理过几乎一模一样的场景，给你两个完全符合你限制条件的解决方案，都是基于你已经能将变量写入appsettings.json的前提来实现：

方案1：通过ASP.NET Core API端点暴露配置 #

这个方案利用ASP.NET Core的能力，创建一个极简的API接口来返回你需要的配置值，SPA在运行时请求这个接口获取数据，完全不需要修改构建流程。

步骤： #

1. 在ASP.NET Core中添加配置端点
   如果是.NET 6+的最小API，直接在Program.cs里添加这段代码：

   // 引入必要的命名空间
   using Microsoft.Extensions.Configuration;
   using System.IO;
   
   // 在app.Run()之前添加
   app.MapGet("/api/config", (IConfiguration config) => 
   {
       return new 
       { 
           ApiBaseUri = config["ServiceLocations:ApiBaseUri"] 
       };
   });
   

   这段代码会创建一个/api/config的GET接口，返回包含ApiBaseUri的JSON对象。

2. 在SPA的ApiService中读取配置
   修改~/src/services/ApiService.ts，在初始化时请求这个接口并保存配置值：

   export class ApiService {
       private apiBaseUri: string | null = null;
   
       constructor() {
           // 初始化时加载配置
           this.loadConfig();
       }
   
       private async loadConfig() {
           try {
               const response = await fetch('/api/config');
               if (!response.ok) throw new Error('Failed to load config');
               const config = await response.json();
               this.apiBaseUri = config.ApiBaseUri;
           } catch (err) {
               // 可选：添加错误处理，比如设置默认值
               console.error('Config load failed:', err);
               this.apiBaseUri = '/default-api';
           }
       }
   
       // 示例API调用方法
       async fetchSomeData() {
           if (!this.apiBaseUri) {
               // 可以等待配置加载完成，或者抛出错误
               await new Promise(resolve => setTimeout(resolve, 100));
               return this.fetchSomeData();
           }
           const response = await fetch(`${this.apiBaseUri}/your-endpoint`);
           return response.json();
       }
   }
   

方案2：将配置注入到index.html的全局变量 #

这个方案更轻量化，不需要额外的API请求，直接在ASP.NET Core返回index.html时，把配置值注入到全局变量中，SPA直接读取这个全局变量即可。

步骤： #

1. 在index.html中添加全局变量占位
   在wwwroot/index.html的<head>或<body>末尾添加一段脚本：

   <script>
       window.appConfig = {
           apiBaseUri: '{{ApiBaseUriPlaceholder}}'
       };
   </script>
   

2. 在ASP.NET Core中替换占位符
   在Program.cs中添加一个中间件，当请求根路径时，读取appsettings.json的配置并替换index.html中的占位符：

   using Microsoft.Extensions.Configuration;
   using System.IO;
   
   // 在app.UseStaticFiles()之后添加
   app.Use(async (context, next) =>
   {
       if (context.Request.Path == "/")
       {
           var env = context.RequestServices.GetRequiredService<IWebHostEnvironment>();
           var config = context.RequestServices.GetRequiredService<IConfiguration>();
           var apiBaseUri = config["ServiceLocations:ApiBaseUri"];
           
           var indexPath = Path.Combine(env.WebRootPath, "index.html");
           var indexContent = await File.ReadAllTextAsync(indexPath);
           indexContent = indexContent.Replace("{{ApiBaseUriPlaceholder}}", apiBaseUri ?? "");
           
           context.Response.ContentType = "text/html";
           await context.Response.WriteAsync(indexContent);
           return;
       }
       await next();
   });
   

   如果你用的是ASP.NET Core的SPA模板（比如React/Vue模板），已经有index.cshtml，可以直接用Razor语法简化：

   <script>
       window.appConfig = {
           apiBaseUri: '@Configuration["ServiceLocations:ApiBaseUri"]'
       };
   </script>
   

   这样就不需要中间件替换文本，Razor会自动帮你注入值。

3. 在SPA的ApiService中直接读取全局变量
   修改ApiService.ts，直接使用全局变量：

   // 先声明全局变量的类型，避免TypeScript报错
   declare global {
       interface Window {
           appConfig: {
               apiBaseUri: string;
           };
       }
   }
   
   export class ApiService {
       private apiBaseUri = window.appConfig.apiBaseUri;
   
       async fetchSomeData() {
           const response = await fetch(`${this.apiBaseUri}/your-endpoint`);
           return response.json();
       }
   }
   

为什么这两个方案符合你的限制？ #

• 不需要webpack构建阶段替换：所有配置都是运行时注入，构建输出在各环境完全共享；
• 不影响webpack打包结果：src目录的代码只需要修改读取配置的逻辑，打包后的压缩包依然是动态文件名，不受影响；
• 完全基于ASP.NET Core托管能力：不需要Node的文件系统库，适配IIS部署的场景；
• 复用你已有的appsettings.json写入流程：只需要读取这个文件的配置，不需要额外的VSTS配置。

内容的提问来源于stack exchange，提问作者Chris Pickford