Angular入门到精通系列教程（14）- Angular 编译打包 & Docker发布

最新推荐文章于 2024-10-31 08:55:53 发布

Jack N

最新推荐文章于 2024-10-31 08:55:53 发布

阅读量7.1k

点赞数

分类专栏： Angular Angular入门到精通文章标签： angular

本文链接：https://blog.csdn.net/weixin_43288714/article/details/113372165

版权

本文档详细介绍了Angular项目的编译打包过程，包括基本打包命令和部署到二级目录的方法。同时，文章讲解了如何将Angular站点发布到web服务器以及使用Docker进行部署，提供了一种基于nginx的基础Dockerfile示例，帮助开发者理解并实践Angular应用的部署流程。

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

环境:

Angular CLI: 11.0.6

Angular: 11.0.7

Node: 12.18.3

npm : 6.14.6

IDE: Visual Studio Code

1. 概要

当我们完成angular的开发后，如何部署到服务器呢？

基于Angular CLI生成的Angular项目，默认会有2个环境配置文件

└──myProject/src/environments/
               └──environment.ts
               └──environment.prod.ts

environment.ts: 针对开发环境使用的环境文件
environment.prod.ts: 生产环境编译时，将替换原有的environment.ts，然后再打包。（根目录下的angular.json定义了这个默认行为，有需要，可以进行修改）

AngularCLI刚刚生成2个文件后，如果打开比较2个文件的区别，可以看到开发环境使用的environment.ts文件中，有这么一句production: false。因为，针对生产环境，angular在编译时需要核心考虑效率等问题，而开发环境，要考虑方便开发者进行调试，侧重点不同。

那么针对生产环境如何编译呢？Angular CLI同样提供了命令,

ng build --prod

其中，参数--prod 即告诉编译环境，编译为生产环境包。同样，angular.json中定义了默认的编译参数，如果需要，可以进行修改。主要配置参数如下

"configurations": {
   
    "production": {
   
        "fileReplacements": [
        {

关注

专栏目录