美文网首页ionic3+项目案例我的ionic
【技巧】ionic多环境配置

【技巧】ionic多环境配置

作者: IT晴天 | 来源:发表于2018-06-06 14:50 被阅读93次

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

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

    相关文章

      网友评论

      • Peter30:大佬,如果不只两种环境怎么配置呢?
        IT晴天:此文链接有写
      • ducks:可以直接写两个js文件,配置脚本的时候 ,不同的脚本命令,打包不同的环境以及不同的参数

      本文标题:【技巧】ionic多环境配置

      本文链接:https://www.haomeiwen.com/subject/kjubsftx.html