如何在Angular 6的angular.json文件中配置及指定环境？

嗨，我来帮你理清楚Angular 6+里怎么指定环境配置～你说得没错，Angular 6+确实把.angular-cli.json换成了angular.json，结构也调整得更清晰了，咱们一步步来：

1. 找到angular.json里的环境配置节点 #

打开你的angular.json文件，找到projects -> 你的项目名称（比如my-app） -> architect -> build -> configurations，这里就是存放所有环境配置的核心区域。默认会自带production和development两个配置，大概长这样：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    // 其他生产环境专属配置...
  },
  "development": {
    "buildOptimizer": false,
    "optimization": false,
    // 其他开发环境专属配置...
  }
}

这里的fileReplacements是关键——它告诉Angular在构建时，用指定的环境文件替换默认的environment.ts。

2. 通过命令指定环境 #

构建项目时指定 #

如果要构建生产环境，直接用：

ng build --configuration production

老版本的简写习惯也还能用：

ng build --prod

如果是自定义的环境（比如预发布环境staging），就用对应的配置名：

ng build --configuration staging

本地运行时指定 #

本地开发服务器也可以指定环境，比如用staging环境启动服务：

ng serve --configuration staging

3. 添加自定义环境（可选） #

如果默认的两个环境不够用，比如要加一个预发布环境（staging）：

• 第一步：在src/environments目录下创建environment.staging.ts，内容参考默认的环境文件，比如：

export const environment = {
  production: false,
  apiUrl: 'https://staging-api.example.com',
  // 其他staging环境专属变量...
};

• 第二步：回到angular.json的build -> configurations里，添加staging配置：

"staging": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.staging.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  // 根据需求调整其他配置项
}

• 第三步：别忘了在architect -> serve -> configurations里也添加对应配置，这样ng serve才能识别这个环境：

"staging": {
  "browserTarget": "my-app:build:staging"
}

这里的my-app要替换成你自己的项目名称哦。

小提示 #

如果你想把某个环境设为默认，可以在architect -> build -> defaultConfiguration里指定，比如：

"defaultConfiguration": "staging"

这样运行ng build或者ng serve时，就会默认使用staging环境了。

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