一个项目常常会有几个开发环境:
- prod
- dev
- test
对于发布调试,不少人采用的是改变常量的方式来构建,如:
// domain = "http://192.168.93.35:9003/demo"; //正式环境
domain = "http://localhost:8080/demo-rest"; //测试环境
这种方式稍显麻烦,也容易误操作,而比较优雅的方式是通过配置文件和命令行参数结合来实现。
具体操作,可以看以下网页:
https://github.com/gshigeto/ionic-environment-variables
也可以试着我下面说的使用,这是我看国外一篇文章的方法,但是有个bug被我处理了,而原文链接我没保存,所以不贴原文了。
步骤:
一、创建配置文件
ionic默认使用了dev和prod两个环境,一般来说够用了,所以创建两个配置文件:
config/config-dev.json
config/config-prod.json
内容类似如下:
{
"mode": "prod",
"url": "http://prod"
}
二、使用自定义webpack配置项
这是ionic多环境配置几种方案中的共同核心部分,打开 package.json 文件,在根节点添加如下内容:
"config": {
"ionic_webpack": "./config/webpack.config.js"
},
同时新建文件:
config/webpack.config.js
里面内容为:
const webpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config');
const webpack = require('webpack');
const ENV = process.env.IONIC_ENV;
const envConfigFile = require(`./config-${ENV}.json`);
const modeConfig = envConfigFile.mode;
const urlConfig = envConfigFile.url;
webpackConfig[ENV].plugins.push(
new webpack.DefinePlugin({
webpackGlobalVars: {
mode: JSON.stringify(modeConfig),
url: JSON.stringify(urlConfig)
}
})
);
意思好理解,就是读取json配置文件的值给自定义webpack插件。
三、使用自定义服务来调用自定义变量
在自定义的Provider中使用webpackGlobalVars
即可,在此新建一个ConfigurationProvider来测试下:
import { Injectable } from '@angular/core';
declare const webpackGlobalVars: any;
@Injectable()
export class ConfigurationProvider {
test(){
alert(JSON.stringify(webpackGlobalVars));
}
}
当执行ionic serve时,编译使用的是dev的环境,所以会弹出config-dev.json的内容:
而使用--prod参数打包后,使用的会是config-prod.json的内容。
网友评论