引言
在实际项目中，不同的环境可能需要不同的配置。例如，开发环境、测试环境和生产环境可能有不同的服务器地址、API 网关、端口号等等。修改这些配置需要频繁地更改代码或者在打包时手动指定，这样就容易出错，并且浪费时间。本文将介绍如何在 Angular 项目中设置不同的环境变量，以便在不同的环境下自动加载不同的配置。
步骤
首先，我们需要在项目根目录下的 src 目录下创建三个不同环境的配置文件：
src
|__ environments
|__ environment.ts
|__ environment.dev.ts
|__ environment.test.ts
|__ environment.prod.tsenvironment.ts是默认的配置文件，包含一些公共的配置，例如production是否为false、API 网关地址等。environment.dev.ts是开发环境的配置文件，包含一些开发环境需要的配置，例如开发环境的服务器地址。environment.test.ts是测试环境的配置文件，包含一些测试环境需要的配置。environment.prod.ts是生产环境的配置文件，包含一些生产环境需要的配置。在ng build --prod命令中会使用这个文件。
例如，我们在 environment.ts 中定义了以下变量：
export const environment = {
production: false,
apiGateway: 'http://localhost:8080/api',
socketServer: 'http://localhost:3000',
googleAnalytics: 'UA-XXXXXXXX-X'
};在 environment.dev.ts 中定义了以下变量：
export const environment = {
production: false,
apiGateway: 'http://dev.example.com/api',
socketServer: 'http://localhost:3000'
};在 environment.test.ts 中定义了以下变量：
export const environment = {
production: false,
apiGateway: 'http://test.example.com/api',
socketServer: 'http://localhost:3000'
};在 environment.prod.ts 中定义了以下变量：
export const environment = {
production: true,
apiGateway: 'http://prod.example.com/api',
socketServer: 'http://prod.example.com/socket',
googleAnalytics: 'UA-XXXXXXXX-X'
};在代码中可以通过 import { environment } from '../environments/environment'; 来引入配置文件。例如，在一个服务中需要使用 apiGateway 地址，我们可以这样写：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ----------- - ---- ------------------------------
-------------
----------- ------
--
------ ----- ---------- -
------------------- ----------- ----------- --
---------- -
------ -------------------------------------------------------
-
-现在，我们需要修改我们的 Angular 项目以便于使用不同的配置，以下是步骤：
Step 1: 在 angular.json 中创建配置
在 angular.json 文件中，为每个环境创建一个新的配置。例如，在 projects 下面找到你的项目名称，然后找到 architect 下面的 build，添加一个新的配置 configurations，它包含我们要设置的变量。在我们的示例中添加以下代码：
-- -------------------- ---- -------
-
---
----------- -
--------- -
---
------------ -
-------- -
---
----------------- -
------ -
------------------- -
-
---------- ----------------------------------
------- -------------------------------------
-
--
--------------- ------
---------------- -------
------------ -----
------------- -----
-------------- -----
------ ------
------------------ -----
-------------- -----
----------------- ------
--------- -------------------
--
------- -
------------------- -
-
---------- ----------------------------------
------- --------------------------------------
-
--
--------------- -----
---------------- ------
------------ ------
------------- -----
-------------- ------
------ -----
------------------ -----
-------------- ------
----------------- -----
--------- -------------------
--
------- -
------------------- -
-
---------- ----------------------------------
------- --------------------------------------
-
--
--------------- -----
---------------- ------
------------ ------
------------- -----
-------------- ------
------ -----
------------------ -----
-------------- ------
----------------- -----
------------------ --------
---------- -
-
------- ----------
----------------- ------
--------------- -----
--
-
------- --------------------
----------------- ------
--------------- ------
-
--
--------- -------------------
-
--
---
--
---
-
-
-
---
-在 configurations 中，我们定义了三个配置，分别是 dev、test 和 prod。每个配置都定义了需要替换的文件(fileReplacements)和其他构建参数，例如 optimization、outputHashing 和 sourceMap。可以看到，dev 配置指定了 environment.dev.ts 文件用于替换默认文件 environment.ts，而其他配置也有类似的设置。
Step 2: 使用不同的配置
现在我们可以使用不同的命令行参数来告诉 Angular 使用不同的配置。例如，运行 ng build --configuration=dev 来使用开发环境的配置。以下是一些示例命令：
- 运行开发服务器：
ng serve --configuration=dev - 构建开发包：
ng build --configuration=dev - 构建测试包：
ng build --configuration=test - 构建生产包：
ng build --configuration=prod
在这些命令中，我们使用 --configuration 选择要使用的配置。当没有指定配置时，默认使用 dev 配置。
总结
在本文中，我们介绍了如何在 Angular 项目中设置不同的环境变量。通过这种方式，我们可以使用不同的配置来自动适应不同的环境，而无需手动更改代码或手动修改构建文件。这大大减少了出错的可能性，并提高了开发效率。此外，我们还介绍了如何在 angular.json 文件中定义不同的配置，并使用不同的命令行参数来使用这些配置。这种方式可以用于任何需要自定义设置的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646acc00968c7c53b0a4772d