Angular4,6 打包最小化,部署服务器
2018-07-04 本文已影响0人
Kathy丶Andy
找度娘下载nginx本地服务器
这里以mac的nginx为例
启动:
sudo nginx
关闭:
sudo nginx -s stop
重新加载:
sudo nginx -s reload
端口被占用:
nginx: [emerg] bind() to 0.0.0.0:80 failed (48: Address already in use);
配置Nginx:
安装完之后,默认路径是在
/usr/local/etc/
文件是放在:
/usr/local/Cellar/nginx/
打开终端,配置启动端口号
vim /usr/local/etc/nginx/nginx.conf
输入 i 进入可编辑模式
#自定义angular项目
server {
listen 5188;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/LBankAngular;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
angular打包项目最小化命令:
sudo ng build --prod --aot --build-optimizer --source-map=false
● 优点
● -1.预编译
● -2.代码压缩
● -3.去掉源程序映射,优化项目体积,打包后vender不到250kb,服务器启用gzip后,vender 大约85kb
把打包完的dist里面文件放本地服务
/usr/local/Cellar/nginx/1.13.12/html 文件夹下面
部署服务器各种资源找不到404
index.html
<base href="/">
修改为
<base href="./">
项目部署到服务器上刷新404解决办法
app.module.ts
import {HashLocationStrategy , LocationStrategy} from '@angular/common';
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
这样设置后,访问angular站点,会自动在根节点后面加一个#锚点。再次刷新便不会报404错误了。
启动你的本地服务,浏览器输入
http://localhost:xxx/