如何在Angular构建时传入参数修改环境变量URL？

刚好我之前也遇到过类似的需求——要给不同Docker容器部署的Angular应用指定不同的后端资源URL，不想每次都手动改环境文件。下面给你两种可行的方案，按需选择：

方案一：通过Webpack扩展实现（更优雅，支持Angular新版本） #

这种方式利用Angular CLI的自定义Webpack配置，直接在构建时注入参数到环境变量里。

1. 准备环境文件 #

先把你的src/environments/environment.docker.ts改成这样，留好变量注入的口子：

// 声明全局process变量，避免TypeScript报错
declare var process: {
  env: {
    BACKEND_URL: string;
  };
};

export const environment = {
  // 保留你原来的其他配置项...
  url: process.env.BACKEND_URL || 'localhost:8080' // 默认值兜底
};

2. 安装依赖并配置自定义Webpack #

首先安装需要的工具：

npm install --save-dev @angular-builders/custom-webpack yargs

然后在项目根目录新建webpack.custom.js文件，用来处理传入的参数：

const webpack = require('webpack');
const argv = require('yargs').argv;

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      // 把命令行传入的--url参数注入到全局环境变量
      'process.env.BACKEND_URL': JSON.stringify(argv.url || 'localhost:8080')
    })
  ]
};

接下来修改angular.json，让Angular CLI使用我们的自定义Webpack配置：
找到architect > build节点，把默认的builder换成自定义的，同时关联我们的配置文件：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.custom.js"
      },
      // 保留你原来的其他options配置...
    },
    "configurations": {
      "docker": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.docker.ts"
          }
        ],
        // 保留你原来的docker环境配置...
      }
    }
  }
}

3. 执行构建命令 #

现在你就可以用指定URL的命令构建了：

# Angular 9+用configuration参数
ng build --configuration docker --url=localhost:9090

# 旧版本Angular（8及以前）可以用--env参数
ng build --env=docker --url=localhost:9090

方案二：用Shell脚本替换文件内容（轻量，无需改Webpack） #

如果不想折腾Webpack配置，这个简单的脚本方案也能满足需求，适合快速实现。

1. 编写构建脚本 #

在项目根目录新建build-docker.sh（Windows用户可以改成bat/PowerShell脚本）：

#!/bin/bash

# 处理传入的URL参数，没传就用默认值
BACKEND_URL=${1:-localhost:8080}

# 替换environment.docker.ts里的默认URL
sed -i "s/localhost:8080/$BACKEND_URL/g" src/environments/environment.docker.ts

# 执行Docker环境的构建
ng build --configuration docker

# 可选：还原environment.docker.ts的原始内容，避免Git提交修改
git checkout src/environments/environment.docker.ts

2. 运行脚本 #

给脚本加执行权限（Linux/macOS）：

chmod +x build-docker.sh

然后执行脚本并传入URL：

./build-docker.sh localhost:9090

额外提醒 #

• 如果用脚本方案，确保environment.docker.ts里的默认URL是唯一的，别和其他字符串重复，避免sed替换出错。
• 如果你想在Docker容器运行时动态修改URL（而不是构建时），可以考虑用APP_INITIALIZER在应用启动时读取容器的环境变量，这样一个构建包就能适配所有环境，不过这是另一种思路了。

内容的提问来源于stack exchange，提问作者edkeveked