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 多端打包的更多相关文章

  1. vue服务端打包及自动部署

    上次给CI环境搭建好了,这次写了一个脚本用于服务端打包及部署使用,解决了前端需要频繁打包的问题,即时将代码推到工程库,服务端自动打包作发布,然后测试人员即时测试,尽早发现问题. 发布原理: 我没有通过 ...

  2. 被IDEA的打包功能打败了:dubbo服务端打包注意事项

    下午在搭建一个基于dubbo和spring的服务端项目.结果打包成jar后各种报错. 起初是因为idea的机制,导致META-INF下自己的Mainfest.mf总是莫名被覆盖,于是报找不到主函数.后 ...

  3. ionic2+Angular web端 实现微信分享以及如何跳转回分享出去的页面

    微信分享,首先参考微信JS-SDK开发文档. step1:在启动文件index.html中引入微信js文件: <script src="http://res.wx.qq.com/ope ...

  4. angular修改端口号port

    报错:Port 4200 is already in use. Use '--port' to specify a different port. 因为4200端口已被使用,请使用“--port”修改 ...

  5. 微端 打包更新工具 as air 分享

    分享 微端,更新的是散包,不像端游,一个大包搞定. 更新须要每次用工具把资源的散文件.依据文件夹结构及时间 生成一个列表, 每次更新就是 文件夹及时间的比对! 该project能够翻译成 其它语言.有 ...

  6. 移动端H5地图矢量SHP网格切分打包方案

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 与离线瓦片方案一样,同样是为了解决移动端网速和流量问题,但是却 ...

  7. Angular入门到精通系列教程(14)- Angular 编译打包 & Docker发布

    目录 1. 概要 2. 编译打包 2.1. 基本打包命令 2.2. 打包部署到二级目录 3. Angular站点的发布 3.1. web服务器发布 3.2. 使用docker发布 4. 总结 环境: ...

  8. 把angular项目整合到.net mvc中

    之前的开发选择的是完全舍弃服务端,仅保留最简单web服务器提供angular经打包的静态资源,此外所有的业务与数据请求都访问一个分离的WebApi来实现.不过最近碰到一个需求,有必要使用多个客户端,而 ...

  9. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

随机推荐

  1. jQuery学习--Code Organization Concepts

    jQuery官方文档:  http://learn.jquery.com/code-organization/concepts/ Code Organization Concepts(代码组织概念) ...

  2. Spring框架的第四天(整合ssh框架)

    ## Spring框架的第四天 ## ---------- **课程回顾:Spring框架第三天** 1. AOP注解方式 * 编写切面类(包含通知和切入点) * 开启自动代理 2. JDBC模板技术 ...

  3. 前端JS常见面试题(代码自撸)

    题目一示例: 适用于子数组等长度及不等长度. let arr = [ [1,2,3], [5,6,7,8], [9,10,11,12,13] ] function arrayDiagonal(arr) ...

  4. PM九步法

    本文转载自网络. 多年以后,当我面对那些年青的产品经理,我会想起自己当年从事的是一份高薪的工作.那是2000年,我大学毕业后在北京一家IT网站做搜索引擎PM,当时我一个月的薪水能在亚运村买一平方米房子 ...

  5. [转载]Oracle创建用户、角色、授权、建表

    出处:https://www.cnblogs.com/roger112/p/7685307.html oracle数据库的权限系统分为系统权限与对象权限.系统权限( database system p ...

  6. Dom 兼容处理

    获取子节点:childNodes 在IE下是可以正常使用的 但是在FF包含了文本节点需要配合nodeType做个类型判断  1是元素节点  3是文本节点 也可以采用 children IE       ...

  7. java 常用的异常处理

    在Java中异常被当做对象来处理,根类是java.lang.Throwable类,在Java中定义了很多异常类(如OutOfMemoryError.NullPointerException.Index ...

  8. iOS项目之WKWebView替换UIWebView相关

    在网上已经有了许多关于UIWebView替换为WKWebView的文章,所以在这里就不在多说替换的细节了,不会的可以在网上搜搜. 下面是我在项目中遇到的问题: 问题一:在UIWebView中,网页显示 ...

  9. ACM题集以及各种总结大全(转)

    ACM题集以及各种总结大全! 虽然退役了,但是整理一下,供小弟小妹们以后切题方便一些,但由于近来考试太多,顾退役总结延迟一段时间再写!先写一下各种分类和题集,欢迎各位大牛路过指正. 一.ACM入门 关 ...

  10. Learning-Python【10】:函数初识

    一.什么是函数 函数就是代码的一种组织形式,是指将一组语句的集合通过一个名字(函数名)封装起来,要想指向这个函数,只需要调用其函数名即可 函数分为两大类:内置函数 和 自定义函数 二.为何要用函数 减 ...