Angular脚手架系列：四、使用Angular CLI进行Build (构建) 和部署

本文链接：https://blog.csdn.net/lxhjh/article/details/96471621

本文详细介绍了如何使用Angular CLI进行构建（Build）和部署，包括ng build命令的使用、Build Targets与Environment的选择、ng serve参数解析以及如何将应用部署到nginx服务器。通过实例展示了从开发环境到生产环境的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Build

二、ng build

三、Build Targets和Environment

四、Serve

五、部署到nginx

一、Build

Build主要会做以下动作:

编译项目文件并输出到某个目录
Build targets决定了输出的结果
bundling 打包
生产环境的build还会进行uglify和tree-shaking(把没用的代码去掉)

二、ng build

可以先看帮助:

ng build --help

Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
usage: ng build <project> [options]

arguments:
  project
    The name of the project to build. Can be an application or a library.

options:
  --aot
    Build using Ahead of Time compilation.
  --base-href
    Base url for the application being built.
  --build-event-log
    **EXPERIMENTAL** Output file path for Build Event Protocol events
  --build-optimizer
    Enables '@angular-devkit/build-optimizer' optimizations when using the 'aot' option.
  --common-chunk
    Use a separate bundle containing code used across multiple bundles.
  --configuration (-c)
    A named build target, as specified in the "configurations" section of angular.json.
    Each named target is accompanied by a configuration of option defaults for that target.
    Setting this explicitly overrides the "--prod" flag
  --cross-origin
    Define the crossorigin attribute setting of elements that provide CORS support.
  --delete-output-path
    Delete the output path before building.
  --deploy-url
    URL where files will be deployed.
  --es5-browser-support
    Enables conditionally loaded ES2015 polyfills.
  --eval-source-map
    Output in-file eval sourcemaps.
  --extract-css
    Extract css from global styles into css files instead of js ones.
  --extract-licenses
    Extract all licenses in a separate file.
  --fork-type-checker
    Run the TypeScript type checker in a forked process.
  --help
    Shows a help message for this command in the console.
  --i18n-file
    Localization file to use for i18n.
  --i18n-format
    Format of the localization file specified with --i18n-file.
  --i18n-locale
    Locale to use for i18n.
  --i18n-missing-translation
    How to handle missing translations for i18n.
  --index
    The name of the index HTML file.
  --lazy-modules
    List of additional