Angular 6中如何通过`ng serve`设置运行环境？

嗨，这个问题我太熟悉了！Angular CLI 6版本开始就彻底替换了旧的--env参数，改用--configuration（可以简写为-c）来指定环境配置。我给你一步步捋清楚怎么配置和使用：

1. 确认环境文件结构 #

首先确保你的src/environments文件夹下已经有对应环境的配置文件，比如：

• environment.ts：默认开发环境
• environment.local.ts：本地测试环境
• environment.dev.ts：开发服务器环境
• environment.prod.ts：生产环境

每个文件里要定义对应的环境变量，比如environment.local.ts：

export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:3000/api'
};

2. 修改angular.json配置 #

这是最关键的一步，需要在项目的angular.json文件里配置各个环境的构建和服务规则：

配置构建环境 #

找到projects -> 你的项目名称 -> architect -> build -> configurations，添加对应环境的配置：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    // 其他生产环境相关配置（比如压缩、哈希等）
  },
  "local": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.local.ts"
      }
    ]
  },
  "dev": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.dev.ts"
      }
    ]
  }
}

配置服务环境 #

接着找到architect -> serve -> configurations，添加对应环境的服务映射：

"configurations": {
  "production": {
    "browserTarget": "你的项目名称:build:production"
  },
  "local": {
    "browserTarget": "你的项目名称:build:local"
  },
  "dev": {
    "browserTarget": "你的项目名称:build:dev"
  }
}

3. 启动对应环境的命令 #

配置完成后，就可以用新的命令启动对应环境了：

• 启动本地环境：ng serve --configuration=local 或者简写 ng serve -c local
• 启动开发服务器环境：ng serve -c dev
• 启动生产环境（一般不建议用serve跑生产环境，这里只是示例）：ng serve -c production

4. 可选：设置默认启动环境 #

如果想让ng serve默认启动某个环境（比如local），可以在angular.json的serve节点下添加defaultConfiguration字段：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的项目名称:build"
  },
  "configurations": {
    // 已有的配置...
  },
  "defaultConfiguration": "local" // 添加这一行
}

这样直接运行ng serve就会自动使用local环境啦！

内容的提问来源于stack exchange，提问作者Martin Adámek