配置angular的环境变量_Angular的environments多环境配置

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

张珍惜

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

阅读量3.4k

点赞数 1

文章标签：配置angular的环境变量

本文链接：https://blog.csdn.net/weixin_27038245/article/details/113578976

版权

Angular项目中，为了应对不同环境如开发、测试和生产，通常需要配置不同的环境变量，比如接口地址。Angular提供了environments目录来管理这些变量。创建environment.ts（开发）、environment.prod.ts（生产）和environment.test.ts（测试）文件，然后在angular.json的build configurations中进行配置。通过package.json的start命令指定--configuration参数，可以选择运行哪个环境的配置，从而实现按需打包。

摘要由CSDN通过智能技术生成

日常开发过程中，有时候会遇到不同环境需有不同配置的需求,也就是不同环境书写不同的代码，例如接口地址等。比较笨的方法是不同环境写死不同的值分别打包，但是这种方法不够优雅。Angular提供了environment这一环境变量来解决我们的需求。具体操作如下：

一、创建environment文件

environments文件夹中创建environment.ts(本地开发环境)、environment.prod.ts(生产环境)、environment.test.ts(测试环境)。

二、配置环境变量

environment.ts

export const environment = {    SERVER_URL: `./`,    production: false,    hmr: false,    useHash: true,    homeUrl:'http://xxxx.xxx/'};

environment.prod.ts

export const environment = {    SERVER_URL: `./`,    production: true,    hmr: false,    useHash: true,    homeUrl:'http://yyyy.yy/'};

environment.test.ts

export const environment = {    SERVER_URL: `./`,    production: true,    hmr: false,    useHash: true,    homeUrl:'http://zzzz.zz/'};

三、找到angular.json文件，projects - architect - build - configurations 修改配置如下：

"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    },  "test": {    "optimization": true,    "outputHashing": "all",    "sourceMap": false,    "extractCss": true,    "namedChunks": false,    "aot": true,    "extractLicenses": true,    "vendorChunk": false,    "buildOptimizer": true,    "fileReplacements": [      {        "replace": "src/environments/environment.ts",        "with": "src/environments/environment.test.ts"      }    ]  },  "local": {    "optimization": true,    "outputHashing": "all",    "sourceMap": false,    "extractCss": true,    "namedChunks": false,    "aot": true,    "extractLicenses": true,    "vendorChunk": false,    "buildOptimizer": true,    "fileReplacements": [      {        "replace": "src/environments/environment.ts",        "with": "src/environments/environment.ts"      }    ]  }}

四、使用环境变量

import { environment } from '@env/environment'; ngOnInit() {    let url =environment.homeUrl; }

特殊说明：package.json中，如果start没有指定--configuration，则取值environment.ts中的值。如果指定，则项目运行过程中会取值指定的环境变量的值。例如：

 "start": "concurrently \"ng serve -o --proxy-config proxy.conf.json --disable-host-check --host=0.0.0.0 --port=8600 --configuration=test \" \"npm run mock \" ",

五、package.json修改配置项实现按需打包，不同环境执行不同的build即可

"build": "ng build --prod --configuration=local","buildProd": "ng build --prod --configuration=production","buildTest": "ng build --prod --configuration=test",