如何为 API Url 使用环境变量（前端使用 Angular 8、TypeScript、HTML 和 SCSS，后端使用 C#）

Question

我的 API Url 被硬编码到localhost:4300我的开发环境中（在 中utilities.ts）

这些是下面的代码

实用程序.ts

const hostToApiUrlMap = { 
localhost: 'http://localhost:4300'
};

环境.prod.ts

export const environment {
production: true
};

环境.ts

export const environment {
production: false
};

我知道当我们进入生产环境时，API Url 会发生变化。我的问题是“如何使用环境变量在前端配置 API Url，使其不被硬编码为localhost:4300？

这样每当 API Url 发生变化时，开发环境都会自动更新到新的 API Url

Answer 1

我建议将两个 URL 放入environment.ts和environment.prod.ts文件中，然后直接从 导入environment.ts。在编译时，如果您进行生产构建， Angular 编译器将使用该environment.prod.ts文件作为文件。environment.ts像这样：

一些文件.ts

import { environment } from "~/environment/environment.ts" // Change this to your file location
console.log("Current API URL:", enviroment.apiUrl);

环境.ts

export const environment = {
  production: false,
  apiUrl: "http://localhost:4300"
}

环境.产品.ts

export const environment = {
  production: true,
  apiUrl: "https://your.actual.api"
}

这是由于 Angular 的构建配置而起作用的。在该文件中angular.json你会发现：

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
],

这意味着在生产模式构建中，该environment.ts文件将被替换为environment.prod.tsfile.