版权声明:作者已开启版权声明,如转载请注明转载地址。 https://blog.csdn.net/qq_34829447/article/details/83213494
一.构建:编译和合并
1.什么是构建
- 将编写的typescript源码变成可以直接放到web服务器上的静态资源
- 构建包括:编译(将typescript编译成JavaScript)和合并(将所有资源整合到一起,减少应用启动时发送http请求的数量,加快启动速度)
- 虽然typescript提供了编译器可以在运行时实时在浏览器中编译,但是如果在生产环境中这样做的话,生产环境需要额外加载一个typescript编译器;每次执行代码之前都要先执行编译。这两个事情执行后会导致性能下降,故将代码部署到服务器之前我们需要在线下把代码编译好,只部署JavaScript代码。
2.如何构建
- 执行
ng build
命令进行构建 - 当前项目目录中会多出dist文件,其中包含构建之后的文件
二.部署:与服务器整合
1.什么是部署
- 将构建后生成文件与服务器放到一起
2.将项目部署到node服务器上
-
部分代码
import * as path from 'path'; app.use('/'.express.static(path.join(__dirname,'..','client')));//当访问根目录时访问上一级的client中的index.html文件
-
遇到问题
- 当访问localhost:8080进入程序再点击页面内容路由到另一个地址如localhost:8080/product后,刷新页面提示无法找到对应地址
- 问题出现原因:刷新后浏览器不知道是路由过去的还是请求的对应地址,默认是当请求的地址去处理
- 问题解决方案:添加对应的HashLocationStrategy的token provider,路由的地址都会携带#
//在app.module.ts中添加provide providers:[{provide:LocationStrategy,useClass:HashLocationStrategy}]路由url地址后有 //每次刷新的时候也都携带#
- 当访问localhost:8080进入程序再点击页面内容路由到另一个地址如localhost:8080/product后,刷新页面提示无法找到对应地址
三.多环境:一套代码支持多种环境
1.开发的流程
- 开发环境:进行开发
- 测试环境:进行测试
- 生产环境:实际运行
2.环境文件
-
在angular-cli.json中的environments属性定义了当前都有哪些环境和对应环境的配置信息,如有需要可以自行添加(环境文件中的属性必须一样)
-
在代码中使用环境对象
-
在main.ts中已经使用了系统定义的属性production,代码如下
if(environment.production) {//判断环境中production的值,决定是否启用对应的模式 enableProdMode(); }
-
我们开发时使用的都是开发环境(默认),如果我们想自行切换到生产环境查看对应的效果,则需要修改package.json中scripts属性对象的start属性值【添加:
--env=prod
参数】"start":"ng serve --env=prod --proxy-config proxy.conf.json"
-