如何更改 Angular 后端的基本 url？

Question

我有路径让路径="/";

当它调用这个路径时，Angular 会生成这样的路径：

http://localhost:4200/backend/api

但是我需要

http://localhost/backend/api

没有端口，如何在 Angular 中设置此选项？

Answer 1

最好的用途是在 enviromenmt.ts 文件中设置一个基本 url。一篇关于环境文件environment.ts文件的好文章：

例如：

environment.ts file:

export const environment = {
    DefaultLanguage: "en",
    production: false,
    development: true,
    environmentName:"DEV",
    baseURL:"http://localhost/backend/api"    
};

environment.prod.ts:

export const environment = {
    DefaultLanguage: "en",
    production: true,
    development: false,
    environmentName:"PROD",
    baseURL:''
};

然后你可以应用一些逻辑：

if (environment.development) {
    this.baseURL = environment.baseURL;
} else if(environment.baseUrl && environment.baseUrl != '') {
    this.baseURL = environment.baseUrl + "/api/";
} else {
    this.baseURL = location.origin + "/api/";
}

并确保 angular.json 文件具有以下配置：

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

对于 QA 或 UAT 环境来说也是如此。见下图：

您可以使用不同的 url 硬编码或基于逻辑的 url 创建多个环境。

因此，让我们将这一更改反映到package.json文件中：

竞选npm run build:prod：

`build:prod`: `ng build --configuration=production`

竞选npm run build:dev：

`build:dev`: `ng build --configuration=development`

竞选npm run build:uat：

`build:uat`: `ng build --configuration=uat`

竞选npm run build:qa：

`build:qa`: `ng build --configuration=qa`