ionic3 多环境配置

ionic3 + angular 5

一个项目至少有两个环境，开发环境和生产环境。

第一步: 在src目录下新建environments文件夹

增加environment.dev.ts,environment.prod.ts。每个分支都export environment对象，但是url不同。

export const environment = {
  "url": "http://xxx.xxx.xxx",
}

第二步: 修改 tsconfig.json

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

第三步: 增加 environments/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');

// NODE_ENV指的是 server的环境，也就是 开发环境还是 测试环境或者生产环境，
// 用来区分不同的api_url和其他插件的app-id或者一些全局变量
var env = process.env.NODE_ENV || 'dev';
// IONIC_ENV指的是 app的打包模式等，例如 --prod 这些
var IONIC_ENV = process.env.IONIC_ENV
useDefaultConfig.dev.resolve.alias = {
    "@environment": path.resolve(environmentPath(env))
};
useDefaultConfig.prod.resolve.alias = {
    "@environment": path.resolve(environmentPath(IONIC_ENV))
};
console.log(IONIC_ENV, '打包模式');
console.log(env, '开发模式');

function environmentPath(env) {
    var filePath = null;
    env.indexOf('dev') != -1 ?
        filePath = 'src/environments/environment.dev.ts' :
        filePath = 'src/environments/environment.' + env.replace(/^\s+|\s+$/g, "") + '.ts';
    if (!fs.existsSync(filePath)) {
        console.log('filePath===>', filePath);
        console.log(chalk.red('\n' + filePath + ' does not exist!'));
    } else {
        return filePath;
    }
}



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

第四步: 修改 package.json

增加config配置

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

通过命令行执行不同环境的项目：修改package.json的配置

npm run dev  // 开发环境   npm run prod //正式环境

 "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "serve": "ionic-app-scripts serve",
        "dev": "set NODE_ENV=dev && ionic-app-scripts serve --dev",  //运行environment.dev中的url
        "prod": "set NODE_ENV=prod && ionic-app-scripts serve --prod"//运行environment.prod中的url
    },

 

 

使用方式

import { Component } from '@angular/core';
import {ENV} from '@env/environment'

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1Page {
  constructor() {
    console.log(ENV);
  }
}