1、最简化的部署方式
最简化的部署方式就是为开发环境构建,并把其输出复制到 Web 服务器上。
-
使用开发环境进行构建
content_copy
ng build
-
把输出目录(默认为
dist/
)下的每个文件都复制到到服务器上的某个目录下。 -
如果要把文件部署到服务器上的某个子路径下,构建时还要添加
--base-href
(基地址)标识,并设置合适的<base href>
。
比如,如果
index.html
位于服务器上的/my/app/index.html
路径下,就要把 base href 设置为<basehref="/my/app/">
,就像这样:content_copy
ng build --base-href=/my/app/
你会看到在生成的
dist/index.html
中<base href>
已经被设置好了。
如果复制到服务器的根目录下,就省略这个步骤,并且让<base href>
保持原样。
要了解<base href>
的作用,参见 下面 的内容。 -
配置服务器,使其在找不到文件时把请求重定向到
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 ./