Angular 环境配置

最新推荐文章于 2024-08-22 20:09:38 发布

相忘江湖恩怨

最新推荐文章于 2024-08-22 20:09:38 发布

阅读量841

点赞数

文章标签： angular

本文链接：https://blog.csdn.net/zaihukeji/article/details/119780493

版权

本文介绍了Angular的环境配置，包括在`index.html`中的配置和优化Tree-Shake的方法。通过环境变量区分开发和生产环境，实现不同环境下的不同配置，如设置API地址。此外，通过配置文件替换，可以实现模块的按需加载，提高Tree-Shake的效果，避免不必要的代码引入。

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

如何使用环境配置

在实际开发中，总是需要针对不同的环境设定不同的参数，Angular 提供了一种应用环境机制，当使用 ng new 构建一个新项目时默认会在 src/environments 目录下针对开发环境与生产环境（environment.prod.ts）的配置项。

绝大多数情况下，我们生产环境的后端请求地址与开发环境是不一样，因此可以分别为其定义不同的域，例如：

// environment.ts
export const environment = {
  production: false,
  apiBaseUrl: `https://test.asdf.com/`
};

对于生产环境可以为：

// environment.prod.ts
export const environment = {
  production: true,
  apiBaseUrl: `https://api.asdf.com/`
};

当然，对于开发人员而言，无须如何去辨别它们，只需要在 src 目录的任意位置引用 apiBaseUrl 变量即可，就像这样：

import { environment } from 'src/environments/environment';

console.log(`${environment.apiBaseUrl}`);

当通过 ng s 开发模式时自动使用 environment.ts，反之 <

关注