【技巧】ionic多环境配置

一个项目常常会有几个开发环境：

• 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两个环境，一般来说够用了，所以创建两个配置文件：

config/config-dev.json
config/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(`./config-${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 {
  test(){
    alert(JSON.stringify(webpackGlobalVars));
  }
}

当执行ionic serve时，编译使用的是dev的环境，所以会弹出config-dev.json的内容:

image.png
而使用--prod参数打包后，使用的会是config-prod.json的内容。