【技巧】ionic多环境配置

一个项目常常会有几个开发环境:

  • 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的内容:

image.png

而使用--prod参数打包后,使用的会是config-prod.json的内容。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

Linux服务器重启后crs_stat -t 命令无法正常使用以及解决思路

前提:在Linux系统中安装ASM,安装完ASM和Oracle数据库时都是正常使用的,但在重启服务器后Oracle相关命令不识别。 1、截图如下: ? 2、查...

4448
来自专栏about云

zookeeper原理

问题导读 1.zk service什么情况下不可用? 2.zk写数据,什么时候才算完成? 3.zk读数据可以在任意一台zk节点上,为什么? 4.zk znod...

3686
来自专栏魏艾斯博客www.vpsss.net

开启 CDN 后 wordpress 后台打不开的解决办法

4674
来自专栏吴伟祥

Redis实现消息队列 转

打开浏览器,输入地址,按下回车,打开了页面。于是一个HTTP请求(request)就由客户端发送到服务器,服务器处理请求,返回响应(response)内容。

2541
来自专栏JavaEE

nginx+vsftp搭建图片服务器前言:简介:nginx的安装:vsftp的安装:配置nginx为图片服务器:总结:

7145
来自专栏JAVA高级架构

高性能MySQL复制与缓存

1372
来自专栏月牙寂

k8s源码分析-----EndpointController

第一时间获取文章,可以关注本人公众号 月牙寂道长 yueyajidaozhang

3175
来自专栏haifeiWu与他朋友们的专栏

自建脚手架之配置中心--LightConf的实现

常规项目开发过程中, 通常会将配置信息位于在项目resource目录下的properties文件文件中, 配置信息通常包括有: jdbc地址配置、redis地址...

1573
来自专栏杂烩

log4j集成kafka配置文件不生效问题解决

    日志采集使用KF,即kfka+flume,有程序直接输出到kafka,flume拉取存储到文件或 elasticsearch中,但是发现第一次启动程序时...

771
来自专栏大数据和云计算技术

MongoDB系列11:Munin监控MongoDB

Munin是一个网络资源监控工具,可以帮助分析资源趋势。默认提供了大量的分析图形。以下讲述如何设置MongoDB的Munin监控插件。

1743

扫码关注云+社区

领取腾讯云代金券