一个项目常常会有几个开发环境：
- prod
- dev
- test
对于发布调试，不少人采用的是改变常量的方式来构建，如：
// domain = "http://192.168.93.35:9003/demo"; //正式环境
domain = "http://localhost:8080/demo-rest"; //测试环境
这种方式稍显麻烦，也容易误操作，而比较优雅的方式是通过配置文件和命令行参数结合来实现。
具体操作，可以看以下网页：
https://github.com/gshigeto/ionic-environment-variables
也可以试着我下面说的使用，这是我看国外一篇文章的方法，但是有个bug被我处理了，而原文链接我没保存，所以不贴原文了。
原理是通过环境变量读取同名配置文件。
步骤：
一、创建配置文件
ionic只（特别注意“只”字）使用了dev和prod两个环境，通过IONIC_ENV环境变量存储，如果你觉得够用了，就借用该变量，否则就自定义环境变量。此时创建两个配置文件：
config/dev.json
config/prod.json
内容类似如下：
{
"mode": "prod",
"url": "http://prod"
}
二、使用自定义webpack配置项
这是ionic多环境配置几种方案中的共同核心部分，打开 package.json 文件，在根节点添加如下内容：
"config": {
"ionic_webpack": "./config/webpack.config.js"
},
同时新建文件：
config/webpack.config.js
里面内容为：
const webpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config');
const webpack = require('webpack');
const ENV = process.env.IONIC_ENV;
const envConfigFile = require(`./${ENV}.json`);
const modeConfig = envConfigFile.mode;
const urlConfig = envConfigFile.url;
webpackConfig[ENV].plugins.push(
new webpack.DefinePlugin({
webpackGlobalVars: {
mode: JSON.stringify(modeConfig),
url: JSON.stringify(urlConfig)
}
})
);
意思好理解，就是读取json配置文件的值给自定义webpack插件。
三、使用自定义服务来调用自定义变量
在自定义的Provider中使用webpackGlobalVars即可，在此新建一个ConfigurationProvider来测试下：
import { Injectable } from '@angular/core';
declare const webpackGlobalVars: any;
@Injectable()
export class ConfigurationProvider {
static getDomainInfo(): any {
const domainInfo = webpackGlobalVars;
return domainInfo;
}
static test(){
alert(JSON.stringify(webpackGlobalVars));
}
}
当执行ionic serve时，编译使用的是dev的环境，所以会弹出dev.json的内容:
而使用--prod参数打包后，使用的会是
prod.json的内容。
补充扩展——三个或者以上环境变量处理
因为ionic使用IONIC_ENV环境变量，默认只支持dev和prod两种环境，对于增加像
test、local等环境是不支持，这时这可借助Node的自定义环境变量进行操作。
Node的环境变量可以这样设置：
Windows：
set NODE_ENV=env
Linux或Mac：
export NODE_ENV=env
这样会存在开发环境差异，建议安装cross-env实现统一配置：
统一开发环境：
安装：npm i cross-env -D
使用：cross-env NODE_ENV=env
所以，保持前文所说的内容，调整如下：
1. package.json修改为以下之一：
Windows:
"scripts": {
"start": "set RUN_ENV=test && ionic-app-scripts serve",
"build": "set RUN_ENV=prod && ionic-app-scripts build --prod",
}
Linux或Mac:
"scripts": {
"start": "export RUN_ENV=test && ionic-app-scripts serve",
"build": "export RUN_ENV=prod && ionic-app-scripts build --prod",
}
统一环境（注意这里没有“&&”）：
"scripts": {
"start": "cross-env RUN_ENV=test ionic-app-scripts serve",
"build": "cross-env RUN_ENV=prod ionic-app-scripts build --prod",
}
2. webpack.config.js修改为：
const webpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config');
const webpack = require('webpack');
const ENV = process.env.IONIC_ENV;
const RUN_ENV = process.env.RUN_ENV || 'dev';
console.log(`当前环境：${RUN_ENV}`);
const envConfig = require(`./${RUN_ENV}.json`);
// 把配置项灵活添加到webpack配置
let globalVars = {};
for(var item in envConfig){
globalVars[item] = JSON.stringify(envConfig[item]);
}
//注意这里是ENV，因为这是覆盖Ionic的默认webpack配置，Ionic只有dev和prod两项配置，填其它会报错，直接取IONIC_ENV就行了，test、local等配置项实际仍是挂在原有的打包环境下的。
webpackConfig[ENV].plugins.push(
new webpack.DefinePlugin({
webpackGlobalVars: globalVars
})
);
这样就大功告成了，其中注意这个注释说明：
注意这里是ENV，因为这是覆盖Ionic的webpack配置，Ionic只有dev和prod两项配置，填其它会报错，直接取IONIC_ENV就行了，test、local等配置项实际仍是挂在原有的打包环境下的。
