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 文件，找到配置部分，然后进行替换：

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

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

1 个答案: