本方法只可以支持两种变量:prod、dev.
最终效果为:
ionic build --prod --env=prod
ionic build --prod --env=dev
本次测试环境变量信息如下:
Ionic:
ionic (Ionic CLI) : 4.2.0 (...\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.10
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (1 plugins total)
System:
Android SDK Tools : 26.1.1 (...)
NodeJS : v8.9.4 (...\node.exe)
npm : 5.6.0
OS : Windows 10
实现步骤:
1.项目src目录增加environments目录,并增加两个两个文件:environment.ts、environment.prod.ts,内容如下:
environment.ts
export const ENV = {
API_URL : 'http://192.168.0.2/api',
VERSION : '1.0.0',
};
environment.prod.ts
export const ENV = {
API_URL : 'http://test.com/api',
VERSION : '1.0.0',
};
2.项目根目录增加config目录,并增加文件webpack.config.js,内容如下:
var chalk = require("chalk");
var fs = require('fs');
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
var env = process.env.IONIC_ENV;
console.log("当前环境为:"+env);
useDefaultConfig.prod.resolve.alias = {
"@app/env": path.resolve(environmentPath('prod'))
};
useDefaultConfig.dev.resolve.alias = {
"@app/env": path.resolve(environmentPath('dev'))
};
if (env !== 'prod' && env !== 'dev') {
useDefaultConfig[env] = useDefaultConfig.dev;
useDefaultConfig[env].resolve.alias = {
"@app/env": path.resolve(environmentPath(env))
};
}
function environmentPath(env) {
var filePath = './src/environments/environment' + (env === 'dev' ? '' : '.' + env) + '.ts';
if (!fs.existsSync(filePath)) {
console.log(chalk.red('\n' + filePath + ' does not exist!'));
} else {
return filePath;
}
}
module.exports = function () {
return useDefaultConfig;
};
3.修改tsconfig.json。在compilerOptions段末尾增加如下内容:
"baseUrl": "./src",
"paths": {
"@app/env": [
"environments/environment"
]
}
4.修改package.json。在末尾处增加如下内容:
,
"config": {
"ionic_webpack": "./config/webpack.config.js"
}
5.需要使用环境变量处,使用如下代码引入即可。
import {ENV} from "@app/env";