angular8的environments使用

最新推荐文章于 2023-05-29 13:47:42 发布

原创最新推荐文章于 2023-05-29 13:47:42 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#angular8 #environment #angular.json

本文详细介绍了Angular项目中如何通过配置不同环境文件(environment.ts, environment.prod.ts, environment.test.ts)实现开发、测试和生产环境的切换。并通过修改angular.json文件中的configurations部分，设置不同环境下的构建参数，如优化、输出哈希、源映射等，以及指定构建时环境文件的替换规则。

1.environment文件夹：

environment.ts：

export const environment = {
  production: false,
  envType: '***'
};

environment.test.ts：

export const environment = {
    production: false,
    envType: '***'
};

environment.prod.ts：

export const environment = {
  production: true,
  envType: '***'
};

2.修改angular.json文件 (Build下和Serve下的"configurations")

Build下修改：

"configurations": {
    "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "2mb",
        "maximumError": "5mb"
      },
      {
        "type": "anyComponentStyle",
        "maximumWarning": "6kb",
        "maximumError": "10kb"
      }
    ]
  },
    "prod": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        }
      ]
    },
    "test": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.test.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        }
      ]
    }
}

Serve下修改：

"configurations": {
  "production": {
    "browserTarget": "name:build:production"
  },
  "prod": {
    "browserTarget": "name:build:prod"
  },
  "test": {
    "browserTarget": "name:build:test"
  }
}

3.打包：

ng build -c production 线上环境 ng b --prod -c=prod

ng build -c test 测试环境