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.完美解决不用打包的时候每次替换前缀,只需要执行不同的打包命令即可

巴特西

angular 多端打包

最新文章

热门文章