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