ionic app 開發和生產環境的配置

前言

像 Angular2 同樣，但願 ionic 能夠提供 2 個文件 ( environment.dev.ts 和 environment.prod.ts )，其中包含與開發和生產環境相對應的不一樣值的變量。在構建過程當中，要在應用程序中綁定適當的文件。

實現步驟

• 在 src/config 中，新建 environment.dev.ts 和 environment.prod.ts

  

// src/config/environment.dev.ts
    
    export const ENV = {
        APP_SERVE_URL: 'http://dev.example.com/api'
    };
    
    
    // src/config/environment.prod.ts
    
    export const ENV = {
        APP_SERVE_URL: 'http://prod.example.com/api'
    };
複製代碼

• 在 src/config 中，新建 webpack.config.js，覆蓋 @ionic/app-scripts 包提供的 webpack.config.js

// src/config/webpack.config.js

var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = function () {
    useDefaultConfig[process.env.IONIC_ENV].resolve.alias = {
        '@environment': path.resolve(__dirname + '/../../src/config/environment.' + process.env.IONIC_ENV + '.ts'),
    };
    return useDefaultConfig;
};
複製代碼

• 更新 package.json 的配置，通知 ionic 使用自定義的 webpack.config.js

"config": {
    "ionic_webpack": "./src/config/webpack.config.js"
}
複製代碼

• 更新 tsconfig.json 的配置，指示 TypeScript 經過編輯 tsconfig.json 爲模塊使用自定義別名 「@environment」

{
  "compilerOptions": {
    "baseUrl":  "./src",
    "paths": {
      "@environment": ["config/environment.prod"]
    }
  }
}
複製代碼

• 導入環境變量

import { ENV } from '@environment';

Test

• ionic serve 或 cordova run android

• ionic cordova build android --prod