How to use Environment Variables for API Url (Angular 8, TypeScript, HTML and SCSS for FrontEnd and C# for BackEnd)

Question

我的 API utilities.ts在我的开发环境（位于 utility.ts 中）中硬编码为localhost:4300

这些是下面的代码

实用程序.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 Z02A3A357710CC2A5DFDFB74ED0

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"
}

环境.prod.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.ts文件。

Answer 2

因此，您可以在项目的根目录创建一个 .env 文件，然后使用process.env.[whatever your variable name is] 。 然后，您可以在需要时轻松更改这些变量。

因此，在.env文件中，您可以创建一个变量，如API_URL= blah blah blah 。 这样做的好处是您甚至可以通过 npm 脚本传递这些变量

或者，如果您生产 url 和 dev url 在大多数情况下将是 static，您可以定义一个变量 if = prodenv 或 = dev 之类的东西。 然后在 js 中的某个地方，比如一个 util 文件，只需执行类似的操作

const apiUrl = process.env.environment === 'prod' ? [prod url] : [dev url]

至于在 api url 更改时自动更改 url，您必须更具体。 就像您将如何通知 FE api url 已更改。 这两件事是完全独立的实体。 它无法知道 Api Url 的变化/它是什么而没有你具体告诉它 url 是什么。 所以从某种意义上说，它必须以某种方式在项目中进行硬编码，即使它只是在 .env 文件中。 唯一的另一种方法是，如果您喜欢定义其他服务器，那么您的工作就是为您的 API 路径来自数据库或其他东西的任何内容提供服务，但这太荒谬了。