• angular 多端打包


    1、在environments文件夹里新建三个文件:

    //生产环境
    environment.prod.ts:
    export const environment = {
      production: true,
        baseUrl:''
    
      url2 : 'http://xxx',
      url3 : 'http://xxx',
    };
    //测试环境
    environment.test.ts:
    export const environment = {
      production: false,
    
        baseUrl:'/test'
    
      url2 : 'http://xxx',
      url3 : 'http://xxx'
    };
    //本地环境
    environment.ts:
    export const environment = {
      production: false,
      url  : 'http://xxx',
      url2 : 'http://xxx',
      url3 : 'http://xxx',
    };

    2、重点是第二步(有别于Angular4):
    找到angular.json文件
    找到 projects - architect - build - configurations 配置如下:

    "production": {
                  "optimization": true,
                  "outputHashing": "all",
                  "sourceMap": false,
                  "extractCss": true,
                  "namedChunks": false,
                  "aot": true,
                  "extractLicenses": true,
                  "vendorChunk": false,
                  "buildOptimizer": true,
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.prod.ts"
                    }
                  ]
                },
                "test": {
                  "optimization": true,
                  "outputHashing": "all",
                  "sourceMap": false,
                  "extractCss": true,
                  "namedChunks": false,
                  "aot": true,
                  "extractLicenses": true,
                  "vendorChunk": false,
                  "buildOptimizer": true,
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.test.ts"
                    }
                  ]
                }

    3、在接口服务里引入

     import {environment} from '../environments/environment';
       url = environment.url;
       url2 = environment.url2;
       url3 = environment.url3;
         let baseUrl=environment.baseUrl;
     
        getDetailGeneral(type,id,isYestday):Observable<any>{
          return this.http.get(`${baseUrl}/risk/getAllListByType?type=${type}&id=${id}&dateTimeYes=${isYestday}`);
        }

    4、package.json 配置里修改:

    "scripts": {
        "ng": "ng",
        "start": "ng serve --host 192.168.1.187",
        "build": "ng build --prod --configuration=production",
        "buildTest": "ng build --prod --configuration=test",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },

    5.test 为前后端分离的代理  新建proxy.conf.json   内容为以下代码 放在和package.json同级目录下   

    {
        "/test": {
            "target": "http://172.21.1.239:8180", 
            "secure": false,
            "changeOrigin": true,
            "pathRewrite": {
                "^/test": ""
            }
        }
    }

    6.完美解决不用打包的时候每次替换前缀,只需要执行不同的打包命令即可

  • 相关阅读:
    MT【105】待定系数算最大最小
    MT【103】二阶递推找规律
    MT【102】一个常见的因式分解公式
    MT【101】分配问题举例若干
    MT【100】经典计数之分配问题
    MT【99】2005联赛二试题我的一行解法
    Qt Creator键盘快捷键速查
    AdaBoost中利用Haar特征进行人脸识别算法分析与总结1——Haar特征与积分图
    图像开源代码
    c++实用技巧
  • 原文地址:https://www.cnblogs.com/fuzitu/p/9989177.html
Copyright © 2020-2023  润新知