在生产和开发环境中设置不同 URL 前缀的正确方法是什么？答案

【问题标题】：What's the correct way to setup different URL prefix in production and development environment?在生产和开发环境中设置不同 URL 前缀的正确方法是什么？
【发布时间】：2020-10-03 17:41:29
【问题描述】：

您如何在生产和开发环境中设置不同的 URL 前缀？那么在开发和生产过程中会遇到不同的域，如何在两个不同的主机之间动态切换？

这就是我现在正在做的事情。

环境.ts

export const environment {
    production: true
}

export const DEVELOPMENT_API_PREFIX = 'http://localhost:55403/api/v1';
export const PRODUCTION_API_PREFIX = 'http://example.com/api/v1';

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment, PRODUCTION_API_PREFIX, DEVELOPMENT_API_PREFIX } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class LoginService {
  API_PREFIX: string;

  constructor(private http: HttpClient) { }

  loginUser(username: string, password: string) {
    if (environment.production) {
      this.API_PREFIX = PRODUCTION_API_PREFIX;
    } else {
      this.API_PREFIX = DEVELOPMENT_API_PREFIX;
    }

    const formData = new FormData();
    formData.append('username', username);
    formData.append('password', password);
    return this.http.post(this.API_PREFIX + 'login', formData);
  }
}

现在这个设置的问题是，我必须在每个服务中编写一个 IF 语句。只是想知道哪个是更好的做事方式。

【问题讨论】：

标签： angularjs environment-variables dev-to-production

【解决方案1】：

大多数解决方案之一是为每个环境创建 environment.[env].ts 文件。以生产为例，创建 environment.prod.ts 文件。所以你可以在这个新的配置文件中使用相同的密钥。例如：

在environment.prod.ts

中

API_PREFIX: 'http://xxx'

在environment.ts

中

API_PREFIX: 'http://xxx

现在打开您的 angular.json 文件，找到 configurations 部分，然后处理替换：

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

然后只需导入 API_PREFIX

import { environment, API_PREFIX } from '...';

您可以点击此链接获得大部分解释： https://www.jvandemo.com/how-to-use-environment-variables-to-configure-your-angular-application-without-a-rebuild/

【讨论】：