ionic3-ng4学习见闻--(多环境方案)

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

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

首先，

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
21 function environmentPath(env) {
22   var filePath = null;
23   env.indexOf('dev') != -1 ?
24     filePath = 'src/environments/environment.ts' :
25     filePath = 'src/environments/environment.' + env.replace(/^\s+|\s+$/g, "") + '.ts';
26   console.log("use env file:" + filePath);
27   if (!fs.existsSync(filePath)) {
28     console.log(chalk.red('\n' + filePath + ' does not exist!'));
29   } else {
30     return filePath;
31   }
32 }
33
34 module.exports = function () {
35   return useDefaultConfig;
36 };

View Code

2.聚焦package.json

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

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

View Code

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   },

View Code

配置了上述命令，我们就可以用类似 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 }

View Code

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

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

View Code

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

打开main.ts新增代码，

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

View Code

然后在命令行敲 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中

打开控制台看下

都打印出来了。

转载于:https://www.cnblogs.com/zwhblog/p/8953626.html

ionic3-ng4学习见闻--(多环境方案)相关推荐

计算机控制在无人车中的应用,深度学习在无人驾驶环境感知中的应用方案
机器深度学习是近年来在人工智能领域的重大突破之一,它在语音识别.自然语言处理.计算机视觉等领域都取得了不少成功.由于车辆行驶环境复杂,当前感知技术在检测与识别精度方面无法满足无人驾驶发展需要,深度学习 ...
深度学习（二）theano学习笔记(1)环境搭建
theano学习笔记(1)环境搭建原文地址:http://blog.csdn.net/hjimce/article/details/46654229 作者:hjimce 搭建theano实属不易,因 ...
深度学习模型部署技术方案
深度学习模型部署技术方案训练好的深度学习模型如何进行部署的相关技术方案 1 什么是模型部署? 2 数据科学项目整个开发流程 3 使用flask 将 Keras深度学习模型部署为Web应用程序 4 T ...
磨刀不误砍柴，配置适合工作学习的桌面环境
在上面聊聊磨刀里,我简单写了提纲,那么就按照顺序,先来聊聊桌面环境吧. 说到桌面环境,不得不提,我的桌面环境是一张很长的写字台,目测可以容纳两台34寸带鱼屏显示器,除了写代码.看电影之外,还能用来 ...
磨刀不误砍柴 - 配置适合工作学习的桌面环境
本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议,欢迎转载.或重新修改使用,但需要注明来源. 署名 4.0 国际 (CC BY 4.0) 本文作者: 苏洋创建时间: 2018年09月2 ...
ubuntu搭建深度学习的docker环境
安装支持CUDA的Docker工具 1.安装Docker # 安装系统工具 $ sudo apt-get update $ sudo apt-get -y install apt-transport- ...
从零开始搭建深度学习服务器: 基础环境配置（Ubuntu + GTX 1080 TI + CUDA + cuDNN）
从零开始搭建深度学习服务器: 基础环境配置(Ubuntu + GTX 1080 TI + CUDA + cuDNN) 首先先声明一下这篇是转载来自 : 从零开始搭建深度学习服务器: 基础环境配置( ...
冲量在线通过信通院联邦学习信创环境基础能力专项评测
近日,由信通院第5批可信隐私计算评审会在北京召开,经过产品资料审核.测试报告审核.质询与答疑.集中评议等众多评审环节,冲量在线旗下产品"冲量数据互联平台V6.0"通过联邦学习信创环 ...
linux学 java_[操作系统]Linux学习第二步(Java环境安装)
[操作系统]Linux学习第二步(Java环境安装) 0 2017-05-19 00:02:21 jdk版本:jdk-8u131-linux-x64.rpm 注:以下操作在root用户或具有root权 ...
Android开发学习之路-环境搭建
这里选择使用android studio 集成开发环境,因为as是google推出的单独针对android开发的环境,并且迭代周期很快,因此,肯定会替代eclipse成为andorid的开发环境.对于 ...

ionic3-ng4学习见闻--(多环境方案)

ionic3-ng4学习见闻--(多环境方案)相关推荐

最新文章

热门文章