在 Angular 中禁用和启用生产模式

发布日期:2026-07-10 00:28:03   来源 : 杭州电子商务研究院    浏览量 :9
杭州电子商务研究院 发布日期:2026-07-10 00:28:03  
9

介绍

在本指南中,我们将学习生产模式。如果你以前没有听说过这个术语,不用担心——我将带你了解生产模式的所有概念,并解释为什么它在网站开发中如此重要。

让我们开始吧

大家知道,网站开发是前端开发和后端开发的结合,在前端和后端都需要按照需求分析文档编写业务逻辑,并且需要进行多次测试。

假设您的服务器位于 AWS 上,您已在 AWS 上部署了后端,现在您尝试使用 AWS URL 进行开发模式。这可能非常昂贵,而企业不想增加预算。

这就是为什么我们在开发初期使用本地主机进行测试。我们不需要访问 AWS 服务器,这有助于节省资金。

我每次都需要更改 URL 吗?

现在您可能想知道:每次在 AWS 服务器和本地主机之间切换时是否都需要更改 URL?

不是。Angular 提供了配置来保留这两个 URL 并有条件地使用它们。

如果您使用以下命令从cmd创建项目...

      ng new project-name
    

...然后 Angular 会自动创建所有必要的文件夹。

在你的 Angular 应用程序中,会有一个名为environment的文件夹。在该文件夹中,你可以看到两个文件:environment.tsenvironment.prod.ts

环境.ts

      export const environment = {
  production: false
};
    

环境.产品.ts

      export const environment = {
  production: true
};
    

除了一件事之外,这两个文件的结构是相同的。在environment.prod.ts文件中,我们有production: true,这可以帮助您理解 production build 将使用此文件而不是environment.ts

我可以更改环境的文件名吗?

您可能还想知道是否可以更改环境的文件名。答案是可以的。为什么不呢?但您需要添加更多配置。您需要通过在 Angular 配置中定义文件名来告诉 Angular 您有不同的文件。

所以现在的问题是,您需要在哪里进行更改以便 Angular 知道这些文件并在生产模式下使用它们?

Angular.json

在您的应用程序中,您有一个名为angular.json的文件。我不会详细介绍angular.json的整个配置。我只会告诉您需要在angular.json中进行的关键更改,以便 Angular 可以使用您的文件而不是默认文件。

      "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,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
    

angular.json中有一个配置对象,您可以在其中查看与生产相关的配置。您只需更改fileReplacements数组中的路径即可。在replace键中,您需要提供要在开发模式下使用的文件的路径。在with键中,您需要提供要在生产模式下使用的文件的路径。

但是在构建时,您还可以选择文件。如果您使用以下命令进行构建:

      ng build
    

然后它将采用生产模式的配置。但如果您必须指定必须使用生产模式的配置,请使用以下命令进行构建:

      ng build --prod
    

结论

本指南主要介绍如何启用和禁用生产模式。您可以在此处阅读更多相关信息。希望您喜欢本指南。继续学习更多知识,我会尽可能帮助您简化学习过程。

以上内容来自杭州电子商务研究院推送
关注
关于我们
热门推荐
合作伙伴
免责声明:本站部分资讯来源于网络,如有侵权请及时联系客服,我们将尽快处理
Copyright © 2025-2027 ToB产业网址导航 公安备案 浙公网安备33010602013138号 浙ICP备16025413号-9
支持 反馈 关注 数据