ionic 支持多环境配置文件

本方法只可以支持两种变量:prod、dev.

最终效果为:

ionic build --prod --env=prod

ionic build --prod --env=dev

本次测试环境变量信息如下:

Ionic:

   ionic (Ionic CLI)  : 4.2.0 (...\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.10

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (1 plugins total)

System:

   Android SDK Tools : 26.1.1 (...)
   NodeJS            : v8.9.4 (...\node.exe)
   npm               : 5.6.0
   OS                : Windows 10

实现步骤:

1.项目src目录增加environments目录,并增加两个两个文件:environment.ts、environment.prod.ts,内容如下:

environment.ts

export const ENV = {
  API_URL             : 'http://192.168.0.2/api',
  VERSION             : '1.0.0',
};

environment.prod.ts

export const ENV = {
  API_URL             : 'http://test.com/api',
  VERSION             : '1.0.0',
};

2.项目根目录增加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.IONIC_ENV;

console.log("当前环境为:"+env);

useDefaultConfig.prod.resolve.alias = {
  "@app/env": path.resolve(environmentPath('prod'))
};

useDefaultConfig.dev.resolve.alias = {
  "@app/env": path.resolve(environmentPath('dev'))
};

if (env !== 'prod' && env !== 'dev') {
  useDefaultConfig[env] = useDefaultConfig.dev;
  useDefaultConfig[env].resolve.alias = {
    "@app/env": path.resolve(environmentPath(env))
  };
}

function environmentPath(env) {
  var filePath = './src/environments/environment' + (env === 'dev' ? '' : '.' + env) + '.ts';
  if (!fs.existsSync(filePath)) {
    console.log(chalk.red('\n' + filePath + ' does not exist!'));
  } else {
    return filePath;
  }
}

module.exports = function () {
  return useDefaultConfig;
};

3.修改tsconfig.json。在compilerOptions段末尾增加如下内容:

    "baseUrl": "./src",
    "paths": {
      "@app/env": [
        "environments/environment"
      ]
    }

4.修改package.json。在末尾处增加如下内容:

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

5.需要使用环境变量处,使用如下代码引入即可。

import {ENV} from "@app/env";
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容