时间戳

首页 > 解决方案 > 如何将相同的角度构建（dist）部署到具有不同后端 url 的多个环境？

angular - 如何将相同的角度构建（dist）部署到具有不同后端 url 的多个环境？

问题描述

最近，当我们想使用 jenkins 将相同的 Angular 构建（dist）部署到多个环境时，我们遇到了这种情况，这意味着不同的后端 url。

标签： angularangular6

解决方案

这就是我们解决它的方法：（参考：https ://github.com/angular/angular-cli/issues/4318 ，特别感谢：Michaël Arnauts）

  1. 在 dist/assets 文件夹中创建一个 js 文件并在那里定义一个全局 js 变量：

    dist/assets/env.js

    window._env = {
    backendUrl: 'https://localhost:XXXX/',
};

  2. 指向环境中的这个全局 js 变量。$ENV.ts 文件：

    src/environments/environment.$ENV.ts

    export const environment = {
    production: true,
    backendUrl: (<any>window)._env.backendUrl,
};

  3. 在index.html中添加 js 的引用

    ... <head> ... <script src="/assets/env.js"></script> </head> ...

  4. 创建环境值 js 文件：

    src/environments/environment.$ENV.values.js

    window._env = {
    backendUrl: 'https://dev.example.com:XXXX/',
};

  5. 创建构建（dist）

  6. 最后，在部署时执行：

    cp src/environments/environment.$ENV.values.js dist/assets/env.js

  7. 完毕！

请注意，第 1 步是必需的，因此您不需要在本地执行第 6 步。

推荐阅读