angular 多端打包
1、在environments文件夹里新建三个文件:
//生产环境
environment.prod.ts:
export const environment = {
production: true,
url2 : 'http://xxx',
url3 : 'http://xxx',
};
//测试环境
environment.test.ts:
export const environment = {
production: false,
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;
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 多端打包的更多相关文章
- vue服务端打包及自动部署
上次给CI环境搭建好了,这次写了一个脚本用于服务端打包及部署使用,解决了前端需要频繁打包的问题,即时将代码推到工程库,服务端自动打包作发布,然后测试人员即时测试,尽早发现问题. 发布原理: 我没有通过 ...
- 被IDEA的打包功能打败了:dubbo服务端打包注意事项
下午在搭建一个基于dubbo和spring的服务端项目.结果打包成jar后各种报错. 起初是因为idea的机制,导致META-INF下自己的Mainfest.mf总是莫名被覆盖,于是报找不到主函数.后 ...
- ionic2+Angular web端 实现微信分享以及如何跳转回分享出去的页面
微信分享,首先参考微信JS-SDK开发文档. step1:在启动文件index.html中引入微信js文件: <script src="http://res.wx.qq.com/ope ...
- angular修改端口号port
报错:Port 4200 is already in use. Use '--port' to specify a different port. 因为4200端口已被使用,请使用“--port”修改 ...
- 微端 打包更新工具 as air 分享
分享 微端,更新的是散包,不像端游,一个大包搞定. 更新须要每次用工具把资源的散文件.依据文件夹结构及时间 生成一个列表, 每次更新就是 文件夹及时间的比对! 该project能够翻译成 其它语言.有 ...
- 移动端H5地图矢量SHP网格切分打包方案
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 与离线瓦片方案一样,同样是为了解决移动端网速和流量问题,但是却 ...
- Angular入门到精通系列教程(14)- Angular 编译打包 & Docker发布
目录 1. 概要 2. 编译打包 2.1. 基本打包命令 2.2. 打包部署到二级目录 3. Angular站点的发布 3.1. web服务器发布 3.2. 使用docker发布 4. 总结 环境: ...
- 把angular项目整合到.net mvc中
之前的开发选择的是完全舍弃服务端,仅保留最简单web服务器提供angular经打包的静态资源,此外所有的业务与数据请求都访问一个分离的WebApi来实现.不过最近碰到一个需求,有必要使用多个客户端,而 ...
- angular 2 - 001 ng cli的安装和使用
angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...
随机推荐
- [js]jquery里的jsonp实现ajax异源请求
同源请求-jquery <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/ ...
- 附8 zipkin
一.zipkin作用 全链路追踪工具(查看依赖关系) 查看每个接口.每个service的执行速度(定位问题发生点或者寻找性能瓶颈) 二.zipkin工作原理 创造一些追踪标识符(tracingId,s ...
- Java 基础 IO
一,前言 回想之前写过的程序,数据都是在内存中,一旦程序运行结束,这些数据都没有了,等下次再想使用这些数据,可是已经没有了.那怎么办呢?能不能把运算完的数据都保存下来,下次程序启动的时候,再把这些数据 ...
- Django进阶之中间件
中间件简介 django 中的中间件(middleware),在django中,中间件其实就是一个类,在请求到来和结束后,django会根据自己的规则在合适的时机执行中间件中相应的方法. 在djang ...
- [openjudge-动态规划]滑雪
题目描述 描述 Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道载一个区 ...
- jvm 线上命令
jstat -gc 40015 查看jvm用的是什么gc算法 java -XX:+PrintCommandLineFlags -version
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
- docker性能测试
测试环境: 操作系统:CentOS7.openstack nova-docker启动的centos7.openstack环境启动的centos7虚拟机 CPU:Intel(R) Xeon(R) CPU ...
- systemd 服务介绍
CentOS7自定义系统服务 CentOS7的服务systemctl脚本存放在:/usr/lib/systemd/,有系统(system)和用户(user)之分,需要开机不登陆就能运行的程序,存在系统 ...
- @Transacitonal注解不生效之spring中expose-proxy的作用与原理
几年前记得整理过,@Transacitonal注解的方法被另外一个方法调用的时候,事务是不生效的. 如果大量代码已经这么写了,这个时候抽取出去不现实,怎么办呢? 答案就是在<aop:aspect ...