一個項目常常會有幾個開發(fā)環(huán)境：

• prod
• dev
• test

對于發(fā)布調(diào)試，不少人采用的是改變常量的方式來構(gòu)建，如：

// domain = "http://192.168.93.35:9003/demo";    //正式環(huán)境
domain = "http://localhost:8080/demo-rest";     //測試環(huán)境

這種方式稍顯麻煩，也容易誤操作，而比較優(yōu)雅的方式是通過配置文件和命令行參數(shù)結(jié)合來實現(xiàn)。

具體操作，可以看以下網(wǎng)頁：
https://github.com/gshigeto/ionic-environment-variables

也可以試著我下面說的使用，這是我看國外一篇文章的方法，但是有個bug被我處理了，而原文鏈接我沒保存，所以不貼原文了。

原理是通過環(huán)境變量讀取同名配置文件。

步驟：

一、創(chuàng)建配置文件

ionic只（特別注意“只”字）使用了dev和prod兩個環(huán)境，通過IONIC_ENV環(huán)境變量存儲，如果你覺得夠用了，就借用該變量，否則就自定義環(huán)境變量。此時創(chuàng)建兩個配置文件：

config/dev.json
config/prod.json

內(nèi)容類似如下：

{
    "mode": "prod",
    "url": "http://prod"
}

二、使用自定義webpack配置項

這是ionic多環(huán)境配置幾種方案中的共同核心部分，打開 package.json 文件，在根節(jié)點(diǎn)添加如下內(nèi)容：

"config": {
    "ionic_webpack": "./config/webpack.config.js"
},

同時新建文件：

config/webpack.config.js

里面內(nèi)容為：

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插件。

三、使用自定義服務(wù)來調(diào)用自定義變量

在自定義的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));
  }
}

當(dāng)執(zhí)行ionic serve時，編譯使用的是dev的環(huán)境，所以會彈出dev.json的內(nèi)容:

image.png

補(bǔ)充擴(kuò)展——三個或者以上環(huán)境變量處理

因為ionic使用IONIC_ENV環(huán)境變量，默認(rèn)只支持dev和prod兩種環(huán)境，對于增加像test、local等環(huán)境是不支持，這時這可借助Node的自定義環(huán)境變量進(jìn)行操作。

Node的環(huán)境變量可以這樣設(shè)置：

Windows： set NODE_ENV=env

Linux或Mac： export NODE_ENV=env

這樣會存在開發(fā)環(huán)境差異，建議安裝cross-env實現(xiàn)統(tǒng)一配置：

統(tǒng)一開發(fā)環(huán)境：
安裝：npm i cross-env -D
使用：cross-env NODE_ENV=env

所以，保持前文所說的內(nèi)容，調(diào)整如下：

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",
    }

統(tǒng)一環(huán)境（注意這里沒有“&&”）：

    "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(`當(dāng)前環(huán)境：${RUN_ENV}`);
const envConfig = require(`./${RUN_ENV}.json`);
// 把配置項靈活添加到webpack配置
let globalVars = {};
for(var item in envConfig){
    globalVars[item] = JSON.stringify(envConfig[item]);
}
//注意這里是ENV，因為這是覆蓋Ionic的默認(rèn)webpack配置，Ionic只有dev和prod兩項配置，填其它會報錯，直接取IONIC_ENV就行了，test、local等配置項實際仍是掛在原有的打包環(huán)境下的。
webpackConfig[ENV].plugins.push(
    new webpack.DefinePlugin({
        webpackGlobalVars: globalVars
    })
);

這樣就大功告成了，其中注意這個注釋說明：

注意這里是ENV，因為這是覆蓋Ionic的webpack配置，Ionic只有dev和prod兩項配置，填其它會報錯，直接取IONIC_ENV就行了，test、local等配置項實際仍是掛在原有的打包環(huán)境下的。