在 Angular 中禁用和启用生产模式
介绍
在本指南中,我们将学习生产模式。如果你以前没有听说过这个术语,不用担心——我将带你了解生产模式的所有概念,并解释为什么它在网站开发中如此重要。
让我们开始吧
大家知道,网站开发是前端开发和后端开发的结合,在前端和后端都需要按照需求分析文档编写业务逻辑,并且需要进行多次测试。
假设您的服务器位于 AWS 上,您已在 AWS 上部署了后端,现在您尝试使用 AWS URL 进行开发模式。这可能非常昂贵,而企业不想增加预算。
这就是为什么我们在开发初期使用本地主机进行测试。我们不需要访问 AWS 服务器,这有助于节省资金。
我每次都需要更改 URL 吗?
现在您可能想知道:每次在 AWS 服务器和本地主机之间切换时是否都需要更改 URL?
不是。Angular 提供了配置来保留这两个 URL 并有条件地使用它们。
如果您使用以下命令从cmd创建项目...
ng new project-name
...然后 Angular 会自动创建所有必要的文件夹。
在你的 Angular 应用程序中,会有一个名为environment的文件夹。在该文件夹中,你可以看到两个文件:environment.ts和environment.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
结论
本指南主要介绍如何启用和禁用生产模式。您可以在此处阅读更多相关信息。希望您喜欢本指南。继续学习更多知识,我会尽可能帮助您简化学习过程。
免责声明:本内容来源于第三方作者授权、网友推荐或互联网整理,旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有,其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况,请与我们取得联系,我们将尽快进行相关处理与修改。感谢您的理解与支持!
请先 登录后发表评论 ~