Angular项目部署

1、最简化的部署方式

最简化的部署方式就是为开发环境构建，并把其输出复制到 Web 服务器上。

1. 使用开发环境进行构建

   content_copyng build

2. 把输出目录（默认为 dist/）下的每个文件都复制到到服务器上的某个目录下。

3. 如果要把文件部署到服务器上的某个子路径下，构建时还要添加 --base-href（基地址）标识，并设置合适的 <base href>。
    

   比如，如果 index.html 位于服务器上的 /my/app/index.html 路径下，就要把 base href 设置为 <basehref="/my/app/">，就像这样：

   content_copyng build --base-href=/my/app/

   你会看到在生成的 dist/index.html 中 <base href> 已经被设置好了。
   
   如果复制到服务器的根目录下，就省略这个步骤，并且让 <base href> 保持原样。
   
   要了解 <base href> 的作用，参见 下面 的内容。

4. 配置服务器，使其在找不到文件时把请求重定向到 index.html。要了解服务端重定向的更多知识，参见 下面 的内容。

这不是生产级部署。它没有优化过，并且对用户来说也不够快。 但是当你向经理、团队成员或其它利益相关者内部分享你的进度和想法时它是足够的。

为生产环境优化

虽然也可以直接用开发环境的设置进行部署，不过你也可以使用 CLI 命令的其它标志生成一个优化过的构建成果。 先来看 --prod。

使用 --prod 构建。

content_copyng build --prod

--prod 元标志包括下列优化特性。

• 预(AOT)编译：预编译 Angular 组件的模板。

• 生产模式：启用生产模式部署到生产环境。

• 打捆（Bundle）：把这些模块串接成一个单独的捆文件（bundle）。

• 最小化：移除不必要的空格、注释和可选令牌（Token）。

• 混淆：使用短的、无意义的变量名和函数名来重写代码。

• 消除死代码：移除未引用过的模块和未使用过的代码。

剩下的 拷贝部署步骤 和以前的方式是一样的。

你还可以添加 build-optimizer 标志来进一步缩减打包体积。

content_copyng build --prod --build-optimizer

参见 CLI 文档，来了解可用的构建选项及其用途的详细信息。

---------------------------

开发环境构建：ng build --base-href ./

生产环境构建：ng build --prod --base-href ./