ionic3 + angular 5
一个项目至少有两个环境,开发环境和生产环境。
第一步: 在src目录下新建environments文件夹
增加environment.dev.ts
,environment.prod.ts。每个分支都export environment对象,但是url不同。
export const environment = {
"url": "http://xxx.xxx.xxx",
}
第二步: 修改 tsconfig.json
{
"compilerOptions": {
...
"baseUrl": "./src",
"paths": {
"@env/environment": [ "environments/environment.prod"]
},
...
},
第三步: 增加 environments/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');
// NODE_ENV指的是 server的环境,也就是 开发环境还是 测试环境或者生产环境,
// 用来区分不同的api_url和其他插件的app-id或者一些全局变量
var env = process.env.NODE_ENV || 'dev';
// IONIC_ENV指的是 app的打包模式等,例如 --prod 这些
var IONIC_ENV = process.env.IONIC_ENV
useDefaultConfig.dev.resolve.alias = {
"@environment": path.resolve(environmentPath(env))
};
useDefaultConfig.prod.resolve.alias = {
"@environment": path.resolve(environmentPath(IONIC_ENV))
};
console.log(IONIC_ENV, '打包模式');
console.log(env, '开发模式');
function environmentPath(env) {
var filePath = null;
env.indexOf('dev') != -1 ?
filePath = 'src/environments/environment.dev.ts' :
filePath = 'src/environments/environment.' + env.replace(/^\s+|\s+$/g, "") + '.ts';
if (!fs.existsSync(filePath)) {
console.log('filePath===>', filePath);
console.log(chalk.red('\n' + filePath + ' does not exist!'));
} else {
return filePath;
}
}
module.exports = function() {
return useDefaultConfig;
};
第四步: 修改 package.json
增加config配置
....
"config": {
"ionic_webpack": "./config/webpack.config.js"
}
....
通过命令行执行不同环境的项目:修改package.json的配置
npm run dev // 开发环境 npm run prod //正式环境
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"serve": "ionic-app-scripts serve",
"dev": "set NODE_ENV=dev && ionic-app-scripts serve --dev", //运行environment.dev中的url
"prod": "set NODE_ENV=prod && ionic-app-scripts serve --prod"//运行environment.prod中的url
},
使用方式
import { Component } from '@angular/core';
import {ENV} from '@env/environment'
@Component({
selector: 'page-page1',
templateUrl: 'page1.html'
})
export class Page1Page {
constructor() {
console.log(ENV);
}
}