Angular 实战——配置使用环境变量

只想快速解决问题的,请直接看粗体部分。

为了更清晰,更快速的了解 Angular 环境配置的架构,请看此图:

下面具体内容也会按照图上所示来介绍。

添加环境配置文件

  1. 创建文件,不过这个步骤在使用 Angular cli 构建的项目的时候已经默认配置好了(如果没有,在项目终端执行 ng generate environments ),在 src -> environments 目录,并且目录下会有几个不同的文件,如下:

名字可以随便取,默认是 Angular 的命名规范, 目录+环境.ts ,一般用默认提供的这两到三个文件就够了,当然如果环境多的情况,就复制出来几份,比如图上: environment.alpha.ts

  1. 配置文件内容

默认需要导出一个对象,默认名字为 environment,如果 想要添加变量,直接在 environment 里添加键值对,比如添加一个baseURL ,下图所示:

两点需要注意:

  1. 多个环境配置文件,默认使用 environment.ts 作为默认/基础文件配置,就是说在项目中使用的地方导入的是该文件 ,可能有同学会问:我想以其他文件作为默认配置行吗,我的回答是:行,但是一定要保证在 angular.json 中映射正确,为了避免配置失误,建议还是不要改。
  2. environment 这个名字也可以修改,但是一定要注意其他引用的地方也要同步修改,比如 main.ts 启动项目时,其他的环境配置文件 一定要和默认/基础文件导出的对象命名保持一致

映射环境配置文件

angular.json 是项目的基础,它配置了打包、服务启动、代理......等,环境配置也是其中的一项

  1. 打开 angular.json 文件,找到节点:"architect" -> "build" -> "configurations",然后添加环境替换规则,如图:

2. 找到节点:"serve" -> "configurations" 添加 "alpha" 节点(内容复制其他环境的就行),如图:

3. 为了后面测试配置的环境是否生效,这里配置默认按照 alpha 运行。

使用环境配置文件

配置结束,使用起来就非常简单了,只需要注意一点,导入的环境文件是基础环境(上面 replace 的文件,通常是 environment.ts),如图:

从页面看下内容:

OK,大功告成!

番外篇:合并通用环境变量

angular 中只提到了配置文件替换规则,可实际开发中有很大部分情况下需要的是合并规则,更详细说:很多环境变量是相同的,我们期望是只写一遍,关于合并规则,angular.json 并没有提供(至少本人没有发现),但是我们可以利用 js 特性手动合并一下,借助一个默认配置文件,配置通用的环境变量,然后在其他文件中做解构合并操作,如图示:

最后

告辞,谢,勿送,望三连 🌹

参考

相关推荐
崔庆才丨静觅8 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60618 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了9 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅9 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅9 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅9 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment9 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅10 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊10 小时前
jwt介绍
前端
爱敲代码的小鱼10 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax