搜了很久,很难找到一个详细入微,开箱即用的方案。

于是我 百折不挠的,搞出来一个,也不知道是不是最完美的方案,有什么可以优化的地方可以指出,谢谢。

首先,

1.项目目录下(与src平级),新增config/webpack.config.js文件,内容如下:

  1. var chalk = require("chalk");
  2. var fs = require('fs');
  3. var path = require('path');
  4. var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
  5.  
  6. // NODE_ENV指的是 server的环境,也就是 开发环境还是 测试环境或者生产环境,
  7. // 用来区分不同的api_url和其他插件的app-id或者一些全局变量
  8. var env = process.env.NODE_ENV || 'dev';
  9. // IONIC_ENV指的是 app的打包模式等,例如 --prod 这些,不过暂时我没写,这里只详细写上述的。
  10. var IONIC_ENV = process.env.IONIC_ENV
  11.  
  12. console.log('NODE_ENV:' + env);
  13.  
  14. console.log('IONIC_ENV:' + IONIC_ENV);
  15.  
  16. useDefaultConfig.dev.resolve.alias = {
  17. "@env/environment": path.resolve(environmentPath(env))
  18. };
  19.  
  20. function environmentPath(env) {
  21. var filePath = null;
  22. env.indexOf('dev') != -1 ?
  23. filePath = 'src/environments/environment.ts' :
  24. filePath = 'src/environments/environment.' + env.replace(/^\s+|\s+$/g, "") + '.ts';
  25. console.log("use env file:" + filePath);
  26. if (!fs.existsSync(filePath)) {
  27. console.log(chalk.red('\n' + filePath + ' does not exist!'));
  28. } else {
  29. return filePath;
  30. }
  31. }
  32.  
  33. module.exports = function () {
  34. return useDefaultConfig;
  35. };

2.聚焦package.json

a.添加代码:为了让webpack 走我们写的 配置文件

  1. "config": {
  2. "ionic_webpack": "./config/webpack.config.js"
  3. }

b.修改代码:新增命令

  1. "scripts": {
  2. "clean": "ionic-app-scripts clean",
  3. "build": "ionic-app-scripts build",
  4. "lint": "ionic-app-scripts lint",
  5. "ionic:build": "ionic-app-scripts build",
  6. "ionic:serve": "ionic-app-scripts serve",
  7. "ionic:serve:dev": "set NODE_ENV=dev && ionic-app-scripts serve --dev",
  8. "ionic:serve:prod": "set NODE_ENV=prod && ionic-app-scripts serve --prod",
  9. "ionic:serve:test": "set NODE_ENV=test && ionic-app-scripts serve --prod",
  10. "ionic:serve:poc": "set NODE_ENV=poc && ionic-app-scripts serve --prod"
  11. },

配置了上述命令,我们就可以用 类似 npm run  ionic:serve:dev 的命令 执行 后面的命令内容(set NODE_ENV=dev && ionic-app-scripts serve --dev)

3.新增environments文件夹,如下,其中dev环境对应的配置文件 默认用 environment.ts

4.environments下面的文件内容:(我只给出了dev的配置文件内容,可以按照dev的写出其他的环境的配置文件,其实就是一个对象)

  1. // environment.ts
  2. export const ENV = {
  3. "mode": "Dev",
  4. "api_url": "http:/XXXXX:35980/hec4Dev"
  5. }

5.聚焦到tsconfig.json,新增代码(在compilerOptions下)

  1. "baseUrl": "./src",
  2. "paths": {
  3. "@env/environment": [ "environments/environment"]
  4. }

6.到了这里基本就配置好了,webpack 会根据 你在命令行敲的命令 分别的去 加载不同环境的配置文件,去测试下吧

打开main.ts新增代码,

  1. import { ENV } from '@env/environment';
  2.  
  3. console.log(ENV)

然后在命令行敲 npm run ionic:serve:prod,在浏览器的控制台就可以看到 当前的 env变量,也就是 配置文件中的对象,

切换到 npm run ionic:serve:dev,发现env变了,这样就节省了 每次不同环境重新打包的时候,修改文件的必要。

7.env变量已经拿到了,但是怎么在我们的page里面使用呢?每个页面都引入一遍么?那岂不是很麻烦

我们就用provider 的 方法 引入好了

打开app.moudle.ts

provider中新增  { provide: 'ENV', useValue: ENV },

这样其他的页面都可以引入这个provider,

例如:login.ts中

打开控制台看下

都打印出来了。

ionic3-ng4学习见闻--(多环境方案)的更多相关文章

  1. ionic3-ng4学习见闻--(多语言方案)

    1.安装ng2-translate npm install ng2-translate --save 2.app.moudle.ts 引入模块,在下方新增方法 import { TranslateMo ...

  2. reactjs学习一(环境搭配react+es6+webpack热部署)

    reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study   或者使 ...

  3. 一、Android学习第一天——环境搭建(转)

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 一. Android学习第一天——环境搭建 Android 开发环境的搭建 ...

  4. Java学习-032-JavaWeb_001 -- Tomcat环境部署及基本配置

    首先到 Tomcat 官网,下载对应的版本,我本机的系统是 WIN7 64BIT 的,因而我选择的是64bit 的zip包,如下图所示:

  5. oracle学习笔记——配置环境

    题记:最近再学oracle,于是按照这本经典的书<Oracle Database 9i/10g/11g编程艺术>来学习. 配置环境 如何正确建立SCOTT/TIGER演示模式 需要建立和运 ...

  6. Zend Framework学习日记(1)--环境搭建篇(转)

    Zend Framework学习日记(1)--环境搭建篇 (1)开发工具 Zend Framework框架:http://framework.zend.com/download/latest 包含2个 ...

  7. Python3学习笔记 - 准备环境

    前言 最近乘着项目不忙想赶一波时髦学习一下Python3.由于正好学习了Docker,并深深迷上了Docker,所以必须趁热打铁的用它来创建我们的Python3的开发测试环境.Python3的中文教程 ...

  8. Javascript学习-简单测试环境

    Javascript学习-简单测试环境 在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很 ...

  9. Node.js环境搭建和学习(windwos环境)

    Node.js环境搭建和学习 一.环境搭建 1.下载安装文件 下载地址http://nodejs-org.qiniudn.com/下载Node.js环境安装包,根据操作系统下载对应的安装包 下载地址 ...

随机推荐

  1. 返回到前台的String出现乱码问题

    使用springmvc给前天返回String类型的数据出现乱码问题可以在配置环境Spring-mvc.xml中添加如下代码 <mvc:annotation-driven> <mvc: ...

  2. 扫描工具nmap介绍

    NMap,也就是Network Mapper,最早是Linux下的网络扫描和嗅探工具包. 简介 nmap是一个网络连接端扫描软件,用来扫描网上电脑开放的网络连接端.确定哪些服务运行在哪些连接端,并且推 ...

  3. nexus私服服务器意外关机后,本地不能下载jar包

    主要记录一个小问题. 今天要做个需求,需要读取word文档中的表格来在生成数据库建表语句. 读取word文档,要添加maven依赖 <dependency> <groupId> ...

  4. [NOIP2009][LuoguP1073] 最优贸易 - Tarjan,拓扑+DP

    Description&Data 题面:https://www.luogu.org/problemnew/show/P1073 Solution Tarjan对联通块缩点,在DAG上按照拓扑序 ...

  5. Python django实现简单的邮件系统发送邮件功能

    Python django实现简单的邮件系统发送邮件功能 本文实例讲述了Python django实现简单的邮件系统发送邮件功能. django邮件系统 Django发送邮件官方中文文档 总结如下: ...

  6. python/ORM操作详解

    一.python/ORM操作详解 ===================增==================== models.UserInfo.objects.create(title='alex ...

  7. I/O和管道

    一:I/O设备 I/O(Input/Output),即输入/输出,通常指数据在内部存储器和外部存储器或其他周边设备之间的输入和输出. 标准输入(STDIN):0 默认接受来自键盘的输入 标准输出(ST ...

  8. uestc 1703一道更简单的字符串题目

    https://vjudge.net/problem/UESTC-1703 题意:略 思路: 枚举+字符串hash. ans从1到len开始枚举字符串的长度,然后就依次比较各段长度为ans的字符串的h ...

  9. Ubuntu 16.04安装Matlab 2016b教程

    由于代码需要依赖Linux环境,只好尝试着装MATLAB,然而各种问题接踵而至,开始了由MATLAB引发的三天Linux探寻之旅-- 下载Matlab 2016b for Linux https:// ...

  10. 使用 Docker 一步搞定 ZooKeeper 集群的搭建

    背景 原来学习 ZK 时, 我是在本地搭建的伪集群, 虽然说使用起来没有什么问题, 但是总感觉部署起来有点麻烦. 刚好我发现了 ZK 已经有了 Docker 的镜像了, 于是就尝试了一下, 发现真是爽 ...