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 ...
随机推荐
- 前端的图片压缩image-compressor(可在图片上传前实现图片压缩)
https://www.imooc.com/article/40038 https://www.jianshu.com/p/3ce3e3865ae2 前端的图片压缩image-compressor(可 ...
- Golang--不定参数类型
1.不定参数类型 不定参数是指函数传入的参数个数为不定数量. package main import ( "fmt" ) //不定参数函数 func Add(a int, args ...
- centos7.5固定局域网ip
有点时候,比如像我们单位,没事干就停一次网,结果ip变了,还得重新看ip,重新配置,很麻烦,所以干脆把自己ip固定,以不变应万变!!! 1.首先查看自己的ip是什么: $ ifconfig eno1: ...
- 中文WebFont解决方案Font-Spider(字蛛)
我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题,我们通常以下方式来进行设计还原: ...
- [macOS] Error: /usr/local must be writable!" (Sierra 10.12 )
Error: /usr/local must be writable!" (Sierra 10.12 ) solution: sudo chown -R $(whoami) /usr/loc ...
- C#-----类FileStream的使用
1.枚举类FileMode 指定操作系统打开文件的方式 CreateNew 指定操作系统应创建一个新的文件 Create 指定操作系统应创建一个新的文件. 如果该文件已存在,则会覆盖它 Open ...
- Python 第五阶段 学习记录之---Django 基础
Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...
- sqlserver 空 处理
NULL:没有对(列)变量输入数据 'NULL'字符串:是长度为4的字符串 空字符串:有对(列)变量输入数据,输入的数据为空字符串 select case lxdh when '' then '空' ...
- mysql插入数据报错1366
数据表插入中文数据报错 Warning Code : 1366 Incorrect string value: '\xE5\x9C\xA8' for column 'name' at row 1 原因 ...
- flutter key
随意点开一个Widget,就会发现,可以传递一个参数Key.那这个Key到底是干啥子,有什么用呢? Flutter是受React启发的,所以Virtual Dom的diff算法也参考过来了(应该是略有 ...