美文网首页
Angular4,6 打包最小化,部署服务器

Angular4,6 打包最小化,部署服务器

作者: Kathy丶Andy | 来源:发表于2018-07-04 18:06 被阅读0次

    找度娘下载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/

    相关文章

      网友评论

          本文标题:Angular4,6 打包最小化,部署服务器

          本文链接:https://www.haomeiwen.com/subject/zskyuftx.html