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