ionic3-ng4學習見聞--(多環境方案)

搜了很久，很難找到一個詳細入微，開箱即用的方案。

於是我 百折不撓的，搞出來一個，也不知道是不是最完美的方案，有什么可以優化的地方可以指出，謝謝。

首先，

1.項目目錄下(與src平級)，新增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');

// 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

console.log('NODE_ENV:' + env);

console.log('IONIC_ENV:' + IONIC_ENV);

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


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

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

 

2.聚焦package.json

a.添加代碼:為了讓webpack 走我們寫的 配置文件

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

b.修改代碼:新增命令

"scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "ionic:serve:dev": "set NODE_ENV=dev && ionic-app-scripts serve --dev",
    "ionic:serve:prod": "set NODE_ENV=prod && ionic-app-scripts serve --prod",
    "ionic:serve:test": "set NODE_ENV=test && ionic-app-scripts serve --prod",
    "ionic:serve:poc": "set NODE_ENV=poc && ionic-app-scripts serve --prod"
  },

配置了上述命令，我們就可以用 類似 npm run  ionic:serve:dev 的命令 執行 后面的命令內容(set NODE_ENV=dev && ionic-app-scripts serve --dev)

 

3.新增environments文件夾，如下，其中dev環境對應的配置文件 默認用 environment.ts

 

4.environments下面的文件內容：(我只給出了dev的配置文件內容，可以按照dev的寫出其他的環境的配置文件，其實就是一個對象)

// environment.ts
export const ENV = {
  "mode": "Dev",
  "api_url": "http:/XXXXX:35980/hec4Dev"
}

5.聚焦到tsconfig.json，新增代碼(在compilerOptions下)

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

 

 6.到了這里基本就配置好了，webpack 會根據 你在命令行敲的命令 分別的去 加載不同環境的配置文件，去測試下吧

打開main.ts新增代碼，

import { ENV } from '@env/environment';

console.log(ENV)

然后在命令行敲 npm run ionic:serve:prod，在瀏覽器的控制台就可以看到 當前的 env變量，也就是 配置文件中的對象，

切換到 npm run ionic:serve:dev，發現env變了，這樣就節省了 每次不同環境重新打包的時候，修改文件的必要。

 

7.env變量已經拿到了，但是怎么在我們的page里面使用呢？每個頁面都引入一遍么？那豈不是很麻煩

我們就用provider 的 方法 引入好了

打開app.moudle.ts

provider中新增  { provide: 'ENV', useValue: ENV },

這樣其他的頁面都可以引入這個provider，

例如：login.ts中

打開控制台看下

都打印出來了。