背景
在实际的开发工作中，我们经常需要对同一个项目进行不同环境的部署，比如本地开发环境、测试环境、预生产环境和生产环境。但是这些环境往往需要不同的配置，比如 API 地址、数据库地址等等。我们如何在 Angular 编译环境下，轻松地进行配置分离呢？
解决方案
在 Angular 应用中，我们可以使用环境变量分离的方式来解决这个问题。具体步骤如下：
1. 新建文件
在项目根目录下，新建 src/environments 文件夹，然后新建以下文件：
environment.ts：开发环境的配置environment.prod.ts：生产环境的配置
2. 配置设置
打开 environment.ts 文件，在里面输入以下内容：
------ ----- ----------- - - ----------- ------ ------------ --------------------------- --
打开 environment.prod.ts 文件，在里面输入以下内容：
------ ----- ----------- - - ----------- ----- ------------ ------------------------- --
默认情况下，Angular CLI 使用 environment.ts 文件中的配置作为开发环境的配置。而在生产环境中，Angular CLI 将使用 environment.prod.ts 文件中的配置。
3. 在代码中使用配置
在代码中，使用以下代码来引用环境变量：
------ - ----------- - ---- ------------------------------ -------------------------------------
在开发环境下，该行代码将会输出 http://localhost:3000/api，而在生产环境下，它将会输出 https://example.com/api。
我们也可以使用以下方式来判断当前是否处于生产环境：
------ - ----------- - ---- ------------------------------ -- ------------------------ - -- -------- - ---- - -- -------- -
4. 自定义环境
如果项目需要更多的环境，我们可以自定义环境。在 src/environments 文件夹下新建一个文件，比如 environment.test.ts，在里面输入以下内容：
------ ----- ----------- - - ----------- ------ ------------ ------------------------------ --
然后在 angular.json 中的 configurations 标签里新建一个配置项：
------- -
------------------- -
-
---------- ----------------------------------
------- --------------------------------------
-
--
--------------- -----
---------------- ------
------------ ------
------------- -----
-------------- ------
------ -----
------------------ -----
-------------- ------
----------------- -----
------------------- -----
---------- -
-
------- ----------
----------------- ------
--------------- -----
--
-
------- --------------------
----------------- ------
--------------- ------
-
-
--然后再用以下命令编译，即可选取 test 环境的环境变量。
-- ----- --------------------
结论
此方案是 Angular 应用中的一种环境变量配置分离技巧，可以在编译环境下，轻松地进行配置分离，提高开发效率、保证代码质量。我们可以根据自己项目的需求，定制多个不同配置的环境。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671f1a992e7021665efba06f