代码之家 › 专栏 › 技术社区 › David Lee

在开发期间使用localhost创建到子域的HREF

href localhost routing proxy angular

David Lee · 技术社区 · 6 年前

我有几个角度的应用程序,我想有链接,去对方。

例如,在App1中,我可能有以下内容 <a href="app2.apps.com">App2</a> . 当应用程序处于活动状态时,这可以正常工作,但在开发过程中,由于app2托管在 localhost:50001 。

有没有办法设置某种类型的代理来捕获我的子域,并在开发期间将它们路由到适当的本地主机?

1 回复 | 直到 6 年前

cyberpirate92 6 年前

如果您使用的是angular cli,则可以使用 环境ts 文件位于 /src/environments 。

可以在这些环境文件中定义特定于环境的值

environment.<some-environment-name>.ts

示例:

环境产品ts (生产环境)

export const environment = {
    production: true,
    api: {
        baseUrl: "http://app2.apps.com"
    },
    // some other properties if required
};

和另一个发展目标

环境ts (开发环境)

export const environment = {
    production: false,
    api: {
        baseUrl: "http://localhost:50001"
    },
    // some other properties if required
};

如果您有更多的环境,可以添加其他环境文件,

环境阶段ts (临时环境)

export const environment = {
    production: false,
    api: {
        baseUrl: "http://app2.stagingapp.com"
    },
    // some other properties if required
};

然后,在 angular-cli.json 在下面 apps 所有物

apps: {
    ..
    ..
    "environmentSource": "environments/environment.ts",  // this should be imported in all the components/services etc
    "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "stage": "environments/environment.stage.ts"
    }
}

在其他任何地方使用这些值(组件、服务等)

import { environment } from ../environments/environment

然后使用它

富。服务ts

private readonly API_URL = `${environment.api.baseUrl}/foo`

public getFoo() {
    return this._http.get(API_URL);
}

注: 切勿在任何组件或服务中导入特定的环境文件,

例如

你应该 从来没有 执行此操作

import { environment } from ../environments/environment.prod; // NEVER do this

相反

使用运行时 ng serve ,使用 --environment 或 --env 选项指定环境值,angular cli将处理其余内容。

ng serve --env=prod  // uses values in environment.prod.ts
ng serve --env=stage // uses values in environment.stage.ts
ng serve             // uses values in environment.ts

在执行 ng build ,使用 --prod 生产生成标志

ng build --prod

要与其他环境一起构建,可以使用 --环境 用于指定环境的选项

ng build --env=stage

希望这有帮助。