前言

像 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.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