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

Question

如何在生产和开发环境中设置不同的 URL 前缀？所以在开发和生产过程中，有不同的域受到攻击，你如何在两个不同的主机之间动态切换？

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

environment.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';

login.service.ts

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 语句。只是想知道哪种做事方式更好。

Answer 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 '...';

您可以按照此 link 了解大多数说明： https://www.jvandemo.com/how-to-use-environment-variables-to-configure-your-angular-application-without-a-rebuild/

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

What's the correct way to setup different URL prefix in production and development environment?

environment-variables

dev-to-production

angularjs