ionic3-ng4学习见闻--(多环境方案)
搜了很久,很难找到一个详细入微,开箱即用的方案。
于是我 百折不挠的,搞出来一个,也不知道是不是最完美的方案,有什么可以优化的地方可以指出,谢谢。
首先,
1.项目目录下(与src平级),新增config/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 console.log('NODE_ENV:' + env); console.log('IONIC_ENV:' + IONIC_ENV); useDefaultConfig.dev.resolve.alias = {
"@env/environment": path.resolve(environmentPath(env))
}; function environmentPath(env) {
var filePath = null;
env.indexOf('dev') != -1 ?
filePath = 'src/environments/environment.ts' :
filePath = 'src/environments/environment.' + env.replace(/^\s+|\s+$/g, "") + '.ts';
console.log("use env file:" + filePath);
if (!fs.existsSync(filePath)) {
console.log(chalk.red('\n' + filePath + ' does not exist!'));
} else {
return filePath;
}
} module.exports = function () {
return useDefaultConfig;
};
2.聚焦package.json
a.添加代码:为了让webpack 走我们写的 配置文件
"config": {
"ionic_webpack": "./config/webpack.config.js"
}
b.修改代码:新增命令
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"ionic:serve:dev": "set NODE_ENV=dev && ionic-app-scripts serve --dev",
"ionic:serve:prod": "set NODE_ENV=prod && ionic-app-scripts serve --prod",
"ionic:serve:test": "set NODE_ENV=test && ionic-app-scripts serve --prod",
"ionic:serve:poc": "set NODE_ENV=poc && ionic-app-scripts serve --prod"
},
配置了上述命令,我们就可以用 类似 npm run ionic:serve:dev 的命令 执行 后面的命令内容(set NODE_ENV=dev && ionic-app-scripts serve --dev)
3.新增environments文件夹,如下,其中dev环境对应的配置文件 默认用 environment.ts
4.environments下面的文件内容:(我只给出了dev的配置文件内容,可以按照dev的写出其他的环境的配置文件,其实就是一个对象)
// environment.ts
export const ENV = {
"mode": "Dev",
"api_url": "http:/XXXXX:35980/hec4Dev"
}
5.聚焦到tsconfig.json,新增代码(在compilerOptions下)
"baseUrl": "./src",
"paths": {
"@env/environment": [ "environments/environment"]
}
6.到了这里基本就配置好了,webpack 会根据 你在命令行敲的命令 分别的去 加载不同环境的配置文件,去测试下吧
打开main.ts新增代码,
import { ENV } from '@env/environment'; 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学习见闻--(多环境方案)的更多相关文章
- ionic3-ng4学习见闻--(多语言方案)
1.安装ng2-translate npm install ng2-translate --save 2.app.moudle.ts 引入模块,在下方新增方法 import { TranslateMo ...
- reactjs学习一(环境搭配react+es6+webpack热部署)
reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study 或者使 ...
- 一、Android学习第一天——环境搭建(转)
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 一. Android学习第一天——环境搭建 Android 开发环境的搭建 ...
- Java学习-032-JavaWeb_001 -- Tomcat环境部署及基本配置
首先到 Tomcat 官网,下载对应的版本,我本机的系统是 WIN7 64BIT 的,因而我选择的是64bit 的zip包,如下图所示:
- oracle学习笔记——配置环境
题记:最近再学oracle,于是按照这本经典的书<Oracle Database 9i/10g/11g编程艺术>来学习. 配置环境 如何正确建立SCOTT/TIGER演示模式 需要建立和运 ...
- Zend Framework学习日记(1)--环境搭建篇(转)
Zend Framework学习日记(1)--环境搭建篇 (1)开发工具 Zend Framework框架:http://framework.zend.com/download/latest 包含2个 ...
- Python3学习笔记 - 准备环境
前言 最近乘着项目不忙想赶一波时髦学习一下Python3.由于正好学习了Docker,并深深迷上了Docker,所以必须趁热打铁的用它来创建我们的Python3的开发测试环境.Python3的中文教程 ...
- Javascript学习-简单测试环境
Javascript学习-简单测试环境 在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很 ...
- Node.js环境搭建和学习(windwos环境)
Node.js环境搭建和学习 一.环境搭建 1.下载安装文件 下载地址http://nodejs-org.qiniudn.com/下载Node.js环境安装包,根据操作系统下载对应的安装包 下载地址 ...
随机推荐
- JMeter入门(01)概念和样例
一.概念 JMeter 是一款专门用于功能测试和压力测试的轻量级测试开发平台,实现了许多和互联网相关的网络测试组件,同时还保留着很强的扩展性. JMeter可以用来测试诸如:静态文件,Java Ser ...
- Spring MVC拦截器的配置
最近在用SpringMVC,想用它的拦截器,但是配置了几次都不成功了,最后翻阅了不少文章终于成功了,遂记录于此,以方便他人. 首先引入命名空间: xmlns:mvc="http://www. ...
- QT5.5与MYSQL5.6数据库连接的具体方法与实现
由于毕设需要用到QT读取数据库中的数据,并将数据保存至数据库中.花了一天的时间,总算实现了从QT中读取数据库中的数据.网上相关资料很多,但是写得不是很全,中间出现了一些问题,解决起来比较麻烦.所以本文 ...
- [NOIP2009][LuoguP1073] 最优贸易 - Tarjan,拓扑+DP
Description&Data 题面:https://www.luogu.org/problemnew/show/P1073 Solution Tarjan对联通块缩点,在DAG上按照拓扑序 ...
- Android自定义圆形图片工具类(CTRL+C加CTRL+V直接使用)
先贴一下工具类的代码!可直接复制粘贴 public class RoundImageView extends ImageView { private Paint mPaint; //画笔 privat ...
- Oracle处理XML字段时遇到的ORA-31013: XPATH 表达式无效问题
select extractValue(ed.info_id, '/Root/ExpandProfile/PhoneNumber') as phone, extractValue(ed.info_id ...
- VirtualBox网络配置使用案例
VirtualBox VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as ...
- 关于terraform的状态管理
我们想在aws创建3台主机,使用ansible和terraform都是可以实现的. 用ansible可能是这样子的: - ec2: count: 10 image: ami-40d281120 ins ...
- webstorm 2018.1 激活码 2018.4.8日更新
安装完成后,打开 WebStorm, 在打开的 License Activation 窗口中选择 License server. 在输入框输入网址即可: http://hb5.s.osidea.cc: ...
- 在服务器上,配置redis可以外网访问
首先linux开放默认端口6379打开redis配置文件redis-conf注释掉 bind 127.0.0.1(默认只有本地主要才能访问)这个注释掉现在处于受保护的状态,外网连不上,因为没有密码 在 ...