前言
像 Angular2 一样，希望 ionic 可以提供 2 个文件 ( environment.dev.ts 和 environment.prod.ts )，其中包含与开发和生产环境相对应的不同值的变量。在构建过程中，要在应用程序中绑定适当的文件。
实现步骤
- 在 src/config 中，新建 environment.dev.ts 和 environment.prod.ts
// src/config/environment.dev.tsexport const ENV = {APP_SERVE_URL: 'http://dev.example.com/api'};// src/config/environment.prod.tsexport 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.jsvar 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
