ionic3-ng4學習見聞--(多環境方案)
搜了很久，很難找到一個詳細入微，開箱即用的方案。
於是我 百折不撓的，搞出來一個，也不知道是不是最完美的方案，有什麽可以優化的地方可以指出，謝謝。
首先，
1.項目目錄下(與src平級)，新增config/webpack.config.js文件，內容如下:
1 var chalk = require("chalk"); 2 var fs = require(‘fs‘); 3 var path = require(‘path‘); 4 var useDefaultConfig = require(‘@ionic/app-scripts/config/webpack.config.js‘);View Code5 6 // NODE_ENV指的是 server的環境，也就是 開發環境還是 測試環境或者生產環境， 7 // 用來區分不同的api_url和其他插件的app-id或者一些全局變量 8 var env = process.env.NODE_ENV || ‘dev‘; 9 // IONIC_ENV指的是 app的打包模式等，例如 --prod 這些，不過暫時我沒寫，這裏只詳細寫上述的。 10 var IONIC_ENV = process.env.IONIC_ENV 11 12 console.log(‘NODE_ENV:‘ + env); 13 14 console.log(‘IONIC_ENV:‘ + IONIC_ENV);15 16 useDefaultConfig.dev.resolve.alias = { 17 "@env/environment": path.resolve(environmentPath(env)) 18 }; 19 20 21 function environmentPath(env) { 22 var filePath = null; 23 env.indexOf(‘dev‘) != -1 ? 24 filePath = ‘src/environments/environment.ts‘ : 25 filePath = ‘src/environments/environment.‘ + env.replace(/^\s+|\s+$/g, "") + ‘.ts‘;26 console.log("use env file:" + filePath); 27 if (!fs.existsSync(filePath)) { 28 console.log(chalk.red(‘\n‘ + filePath + ‘ does not exist!‘)); 29 } else { 30 return filePath; 31 } 32 } 33 34 module.exports = function () { 35 return useDefaultConfig; 36 };
2.聚焦package.json
a.添加代碼:為了讓webpack 走我們寫的 配置文件
1 "config": { 2 "ionic_webpack": "./config/webpack.config.js" 3 }View Code
b.修改代碼:新增命令
1 "scripts": { 2 "clean": "ionic-app-scripts clean", 3 "build": "ionic-app-scripts build", 4 "lint": "ionic-app-scripts lint", 5 "ionic:build": "ionic-app-scripts build", 6 "ionic:serve": "ionic-app-scripts serve", 7 "ionic:serve:dev": "set NODE_ENV=dev && ionic-app-scripts serve --dev", 8 "ionic:serve:prod": "set NODE_ENV=prod && ionic-app-scripts serve --prod", 9 "ionic:serve:test": "set NODE_ENV=test && ionic-app-scripts serve --prod", 10 "ionic:serve:poc": "set NODE_ENV=poc && ionic-app-scripts serve --prod" 11 },View Code
配置了上述命令，我們就可以用 類似 npm run ionic:serve:dev 的命令 執行 後面的命令內容(set NODE_ENV=dev && ionic-app-scripts serve --dev)
3.新增environments文件夾，如下，其中dev環境對應的配置文件 默認用 environment.ts
4.environments下面的文件內容：(我只給出了dev的配置文件內容，可以按照dev的寫出其他的環境的配置文件，其實就是一個對象)
1 // environment.ts 2 export const ENV = { 3 "mode": "Dev", 4 "api_url": "http:/XXXXX:35980/hec4Dev" 5 }View Code
5.聚焦到tsconfig.json，新增代碼(在compilerOptions下)
1 "baseUrl": "./src", 2 "paths": { 3 "@env/environment": [ "environments/environment"] 4 }View Code
6.到了這裏基本就配置好了，webpack 會根據 你在命令行敲的命令 分別的去 加載不同環境的配置文件，去測試下吧
打開main.ts新增代碼，
1 import { ENV } from ‘@env/environment‘; 2 3 console.log(ENV)View Code
然後在命令行敲 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中
打開控制臺看下
都打印出來了。
ionic3-ng4學習見聞--(多環境方案)