本方法已弃用，请参考新方法 ionic 3 开发环境切换
ionic 优雅的解决开发跨域及后台环境切换
之前主要接触的是Android和J2EE之类的开发,不是一个正统前端狗,所以很多前端的特性和骚操作都没有深入了解过。去年部门开始要我带头入坑ionic2,于是我从一个连JavaScript的Hello World都没写过的人，转型为一个Angualr 2+ionic 2的伪前端狗。由于没人指导，期间踩坑无数，的感觉头发日渐稀少，炎热的夏天，头顶总是有丝丝凉意。所以现在闲了下来（更应该说是顿悟后打鸡血般的兴奋感以及女朋友的支持……），决定把一些遇到的坑写出来。
-1
我是前端入门小白，所以可能这条路是错的，不喜勿喷。
0x00 开始
后面都围绕着Gank.io这个网站提供的API测试。
ionic其实就是一个基于Angular前端项目。所以在前端开发的过程中，必须要解决CORS跨域问题。解决方法主要有两个：
-
Chrome浏览器中安装Access-Control-Allow-OriginChrome拓展 修改后台Service,允许跨域访问(非常极其以及十分的不安全，但我 TMD 前面两个项目就是这样做的，而且因为项目问题，现在不能随便更改项目配置，只能眼睁睁开着项目裸奔着，这或许是我这辈子最大的败笔吧)- 使用
ionic CLI代理服务器
为何不用第一种方法？
装完Chrome拓展后，开启拓展后，默认所有网站都允许跨域，这就很不安全了 。
这方法还存在一个坑，就是开启拓展后，上
GayhubStar 一些屌炸天的项目的时候，居然会报错，一两次没注意，以为是梯子不稳了，一直错误，才感觉好像并没有那么简单。经过一番推理，发现就是因为开启了跨域拓展，Gayhub做了保护，拒绝了请求，导致报错
当然，一定要用这方法也不是不行，就要花点心思配置了，一个项目还好，多个项目就麻烦了，而且这拓展有时候还会莫名的失效，需要开关拓展刷新页面才恢复正常，这就很不优雅了。
为何不用第二种方法？
f**k
为何用第三种方法？
因为这合理切符合我们对优雅的追求。
0x01 设置ionic CLI代理服务器
在ionic 2及ionic 3项目根目录中，都有ionic.config.json这个文件，我们就是通过这个配置文件实现的。
实现代理
现在我们要调用API接口http://www.gank.io/api/day/history，获取所有历史记录。我们来拆解下这个URL:
通过API说明页：
- 这个网站的主
URL是http://gank.io - 所有接口都是
/api这个路由下的
专业一点的说法就是，这个项目的endpoint是http://www.gank.io/api,path是/api。
说点人话就是，如果我是http://www.gank.io网页中包含的一个ajax请求，当我请求/api/history这个url的时候，浏览器最终会把你的请求地址补全，补全为http://www.gank.io/api/day/history，然后你就可以得到数据了。你要实现这自动补全（瞎称呼的，为了方便理解）URL的功能，必须要以/api开头，当浏览器发现是/api开头的时候，就会自动补全，如果不是，就直接请求你输入的URL了。可以把这理解为规定，没有为什么。
结论：
-
proxyUrl=>http://gank.io/api -
path=>/api
修改ionic.config.json文件:
{
"name": "gank-me",
"app_id": "",
"type": "ionic-angular",
"integrations": {},
"proxies": [
{
"path": "/api",
"proxyUrl": "http://gank.io/api"
}
]
}
测试
import { Http } from '@angular/http';
//***
this.http.get("/api/day/history")
.toPromise()
.then(res=>{debugger});
结果：
就是成功的返回数据嘛
0x02优雅的切换服务器环境
一个稍微正经点的商业项目，总有至少3个环境情况，开发、测试、生产（正式）环境,即Dev,UAT,Prod。在不同环境下，我们有不一样的配置，如数据库的文件名不同，某些服务用到的key不同………这就需要在各个环境之间进行切换。切换的方式有两种：
- 在一个
*.ts文件中，定义好URL,Key等信息，测试、打包时，手动切换 - 通过
Webpack脚本，通过参数的方式切换
为何放弃方法一？
放弃主要是误操作概率太高，且难以接入Jenkins自动构建打包。如果没有一个人专门负责打包，且这个人还有自己的一个打包TODO list，很容易想象这样一个场景，经过漫长的打包过程后，安装到手机时，才发现环境错了，这就很僵硬了；当然还有比这更糟糕的，就是在生产环境一顿猛如虎的操作后才发现，丫哟，环境错了！！
方法二？
如果是通过参数传入的方式更改环境，或许会简单准确很多吧，至少在Android开发时，通过多渠道打包的方式打包，没有出现过环境搞错的问题。所以这方法二就显得很正确，很优雅了。那么如何实现呢？
开始
预配置环境参数
创建三个环境对应的ts文件：
environment.dev.tsenvironment.prod.tsenvironment.uat.ts
结构：
.
├── src
│ ├── environments
│ │ ├── environment.dev.ts
│ │ ├── environment.prod.ts
│ │ └── environment.uat.ts
以environment.prod.ts为例，内容如下:
export const ENV = {
"mode": "Prod",
"database": "data.db",
"cordova": {
"id": "io.ionic.starter",
"version": "0.0.1",
"ios": {
"CodePushServerUrl": "prod",
"CodePushDeploymentKey": "1234567890"
},
"android": {
"CodePushServerUrl": "prod",
"CodePushDeploymentKey": "0987654321"
}
}
}
然后在项目根目录中创建文件夹config，里面创建文件webpack.config.js
.
├── config
│ └── webpack.config.js
内容如下:
var chalk = require("chalk");
var fs = require('fs');
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
var env = process.env.NODE_ENV || 'dev';
var IONIC_ENV = process.env.IONIC_ENV
console.log('NODE_ENV:' + env);
console.log('IONIC_ENV:' + IONIC_ENV);
if (env === 'dev') {
if (IONIC_ENV == 'dev') {
useDefaultConfig.dev.resolve.alias = {
"@env/environment": path.resolve(environmentPath('dev'))
};
};
if (IONIC_ENV == 'prod') {
useDefaultConfig.prod.resolve.alias = {
"@env/environment": path.resolve(environmentPath('dev'))
};
};
}
if (env === 'uat') {
if (IONIC_ENV == 'dev') {
useDefaultConfig.dev.resolve.alias = {
"@env/environment": path.resolve(environmentPath('uat'))
};
};
if (IONIC_ENV == 'prod') {
useDefaultConfig.prod.resolve.alias = {
"@env/environment": path.resolve(environmentPath('uat'))
};
};
}
if (env === 'prod') {
if (IONIC_ENV == 'dev') {
useDefaultConfig.dev.resolve.alias = {
"@env/environment": path.resolve(environmentPath('prod'))
};
};
if (IONIC_ENV == 'prod') {
useDefaultConfig.prod.resolve.alias = {
"@env/environment": path.resolve(environmentPath('prod'))
};
};
}
function environmentPath(env) {
var filePath = 'src/environments/environment.' + env + '.ts';
console.log("use env file:" + filePath);
if (!fs.existsSync(filePath)) {
console.log(chalk.red('\n' + filePath + ' does not exist!'));
} else {
return filePath;
}
}
module.exports = function () {
return useDefaultConfig;
};
修改项目的package.json文件，添加：
"config": {
"ionic_webpack": "./config/webpack.config.js"
}
修改tsconfig.json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@env/environment": [
"environments/environment.prod"
]
}
}
}
实现动态切换环境URL
前面我们说了设置ionic CLI代理，这时候当然也要加入，实现一个命令，切换环境及参数，才是我们的目标。下面我们开始实现.
- 项目根目录创建文件
enviroment.json：
{
"devUrl": "http://localhost:8080/api",
"devPath": "/api",
"uatUrl": "http://r.example.com/api",
"uatPath": "/api",
"prodUrl": "http://gank.io/api",
"prodPath": "/api"
}
dev和uat我瞎写的，不要在意，只是为了实现效果而已啦。
- 然后，我们修改刚刚的
webpack.config.js文件，添加一个方法setProxy()及调用者方法的一句代码，完整的webpack.config.js:
var chalk = require("chalk");
var fs = require('fs');
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
var env = process.env.NODE_ENV || 'dev';
var IONIC_ENV = process.env.IONIC_ENV
console.log('NODE_ENV:' + env);
console.log('IONIC_ENV:' + IONIC_ENV);
if (env === 'dev') {
if (IONIC_ENV == 'dev') {
useDefaultConfig.dev.resolve.alias = {
"@env/environment": path.resolve(environmentPath('dev'))
};
};
if (IONIC_ENV == 'prod') {
useDefaultConfig.prod.resolve.alias = {
"@env/environment": path.resolve(environmentPath('dev'))
};
};
}
if (env === 'uat') {
if (IONIC_ENV == 'dev') {
useDefaultConfig.dev.resolve.alias = {
"@env/environment": path.resolve(environmentPath('uat'))
};
};
if (IONIC_ENV == 'prod') {
useDefaultConfig.prod.resolve.alias = {
"@env/environment": path.resolve(environmentPath('uat'))
};
};
}
if (env === 'prod') {
if (IONIC_ENV == 'dev') {
useDefaultConfig.dev.resolve.alias = {
"@env/environment": path.resolve(environmentPath('prod'))
};
};
if (IONIC_ENV == 'prod') {
useDefaultConfig.prod.resolve.alias = {
"@env/environment": path.resolve(environmentPath('prod'))
};
};
}
function environmentPath(env) {
var filePath = 'src/environments/environment.' + env + '.ts';
console.log("use env file:" + filePath);
setProxy(env);
if (!fs.existsSync(filePath)) {
console.log(chalk.red('\n' + filePath + ' does not exist!'));
} else {
return filePath;
}
}
function setProxy(env) {
console.info("Set proxy");
var configJson = require("../enviroment.json");
fs = require('fs');
var path = require('path');
var filePath = path.resolve(__dirname, '../ionic.config.json');
var m = JSON.parse(fs.readFileSync(filePath).toString());
var serverUrl;
var urlPath;
switch (env) {
case "prod":
serverUrl = configJson.prodUrl;
urlPath = configJson.prodPath;
break;
case "dev":
serverUrl = configJson.devUrl;
serverUrl = configJson.devPath;
break;
default:
serverUrl = configJson.devUrl;
serverPath = configJson.devPath;
break;
}
m.proxies[0].proxyUrl = serverUrl;
m.proxies[0].path = urlPath;
fs.writeFileSync(filePath, JSON.stringify(m));
}
module.exports = function () {
return useDefaultConfig;
};
添加启动Script
现在其实已经完成了配置文件的编写，下面就是解决如何使用的问题，我这里举个不完整例子
-
修改
package.json添加两个环境,Dev和Prod:{ "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve", "serve:uat": "NODE_ENV=uat ionic serve", "serve:prod": "NODE_ENV=prod ionic serve" } }
2. [例]在`home.ts`中调用配置的参数
```typescript
import { Http } from '@angular/http';
import { ENV } from '@env/environment'
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
constructor(private http: Http) {
}
ionViewDidLoad() {
console.log(ENV.mode); //打印环境
debugger; //加个断点
}
}
- 切换环境并运行
假设需要切换到prod环境，那么终端执行$ npm run serve:prod，如果成功，会自动打开网页
断点
我们看到，参数都在ENV这个对象中。
ionic CLI代理就不测了，反正都可以用就对了。
如果要切换uat那就$ npm run serve:uat呗，这些命令都是定义在package.json中scripts里面，大家可以依葫芦画瓢整起来 - 完成
项目
Gank-me
参考allnew_package分支
