一.nvm，node，npm，ionic环境安装

1.下载nvm 1.1.7的安装包

https://github.com/coreybutler/nvm-windows/releases/tag/1.1.7

2.解压安装，在这过程中不必先创建nvm文件夹,他会自动创建，nodejs文件夹在后面也会自动创建，路径之类的他也会自动进行配置

image.png

3.查看是否安装成功 nvm -v

image.png

4.安装node nvm install 18.3.0(18.3.0是版本号，这里建议安装较低的一个版本后面我安装了一个10.15.3的一个版本，因为针对每一个版本逗得重新安装一下ionic，所以还是一次性安装成功舒服一点)

image.png

5.查看node版本 node -v

image.png

6.查看npm版本 npm -v

image.png

对于上面这个警告我们需要修改两个文件，然后修改成对应的地方 -g 换成 --location=global ，修改之后如第二张图就没有问题了

image.png
image.png

7.

npm config set prefix E:\Software\Common\NVM\nodejs\node_global
npm config set cache E:\Software\Common\NVM\nodejs\node_cache

8.安装cnpm 然后查看是否安装成功cnpm -v(这里一般会报错，因为还没有将这个cnpm添加到系统环境变量里面，这个路径是上一步配置的node_global的路径，配置完成之后重新打开cmd查看cnpm -v就会成功，只要配置环境变量就重新打开cmd)

npm install -g cnpm --registry=https://registry.npm.taobao.org

image.png

9.npm设置淘宝镜像,然后查看配置的镜像地址

npm config set registry https://registry.npm.taobao.org #设置镜像
npm config get registry #获取镜像地址

10.安装ionic(这里更加建议安装3.9.2的版本)，到这一应该完成了一部分

npm install -g cordova ionic@4.12.0

-----------------------------------------------------------------------------

二.ionic项目创建

1.创建项目 选择模板的时候选择tabs，但是报了错，我的ionic版本下载的是4.12.0我重新安装了3.9.2的版本npm install -g ionic@3.9.2,然后重新创建项目，创建过程中有报错报错为npm ERR这个错误，按照网上的方法执行了下面的命令

ionic start myapp #开启一个应用程序

#npm ERR! node-sass@4.5.3 postinstall: node scripts/build.js的解决版法 ，我的不加--save一致解决不了，网上好多都没有--save
npm install node-sass@4.14.1 --save

image.png

这张图为node和node-sass版本不匹配的错误

image.png

这张图为node和node-sass的版本匹配图

image.png

2.我在ionic serve -p 80 启动项目的时候报了下面的这个错误然后执行下面的方法就行

Error: Cannot find module 'E:\Project\App\myapp\node_modules\@ionic\app-scripts'
#解决方案
npm install @ionic/app-scripts@latest --save-dev

3.再次启动结果如下图所示

image.png

三.项目编译打包

1.执行ionic cordova build android出现如下错误

[ERROR] An error occurred while running subprocess ng.

#解决方案：
ng add @ionic/cordova-builders

2.我们先执行一下cordova requirements来查看一下需要的环境，下面我来一条一条说明我的情况(这里只截取了前面两条)

Java JDK: installed 1.8.0 
Android SDK: not installed

1.对于java版本的要求，我已经配置好java1.8的环境变量，但是cmd还是显示java 16的版本，后来经过查找在网上发现是由于安装oracle的时候配置的一个环境变量，系统会默认先选择oracle配置的环境变量，只需要将这两个环境变量移在最下面就行，这个时候重新打开cmd查看版本以及没有问题

image.png

2.Android SDK: not installed ，对于这个问题根据自己的环境变量根据如下配置就可以了我的是由于之前ANDROID_SDK_ROOT写成ANDROID_SDK_HOME了，好像有点可笑

image.png

3.先来执行一下cordova run android（在这之前我又执行过cordova requirements，但是还是在提示安装对应的ANDROID SDK，然后我就想着看能先运行起来不），发现报如下的错误，这个是我的gradle版本过高，把他这个连接下载下来，然后把gradle环境变量配置一下就行

image.png
image.png

4.配置好之后重新打开webstorm来执行一遍cordova run android，发现报如下错误，这个刚开始我准备在cmd 敲android回车在弹出来的android sdk manager里面下载build tool的，结果发现最高只能下载29.0.6，然后我就去官网下载了一个33.0.0的发现还是不行，最后就下载了android studio来下载了，你们可以看一下有没有你们想要的版本，有的话就方便多了，android studio 安装好了之后顺便生成了一个空白项目，然后跑了一下，没啥问题，然后再去看android-build-tool就有了30.0.3的了，这应该很幸运了

image.png

5.有了android-build-tool之后再来执行一遍ionic cordova run android出现如下错误,于是我找到这个文件将其删除

Failed to read key AndroidDebugKey from store "C:\Users\Administrator\.android\debug.keystore": Invalid keystore format

6.删除之后再来执行一边效果如图所示，虽然有报错但是还是生成了，最后安装在手机上成功运行，也许这就是成功学吧

image.png

四.热部署插件安装

1.首先安装热更新插件

ionic cordova plugin add cordova-hot-code-push-plugin
#ionic cordova plugin add cordova-hot-code-push-local-dev-addon #这个先别添加，我的添加了没有弄出来

#在执行这个的时候报错了，然后我用管理员权限打开了cmd重新执行一遍
#然后提示我用--force执行以下，使用--force执行成功
npm install -g cordova-hot-code-push-cli 

image.png
image.png

2.在config.xml配置文件中加入下面节点,然后执行cordova-hcp init,我这里提示了像下面的错误,最后得出的结论就是node版本过高，cordova-hot-code-push-cli 插件已经很久没有进行更新了

<chcp>
     <config-file url="http://192.168.1.203:8121/chcp.json" />
     <native-interface version="1" />
</chcp>
#第一个子节点是需要发布在iis上的文件地址
#第二个子节点是当前版本号

cordova-hcp server  #这个命令最终没有执行出任何效果，换成了下面这个命令还是执行除了网上所需要的文件一个是www目录下面的chcp.json和chcp.manifest两个文件
cordova-hcp build

Warning: Accessing non-existent property 'padLevels' of module exports insid
syscall: 'spawn ./ngrok.exe'

下面是在使用nvm安装node8.11.2的时候提示npm下载失败，我们只需要将他提示的这个地址下载下来然后解压到v8.11.2下面的node_moudles文件夹下面，取名npm，并将npm bin目录下面的文件复制到v8.11.2的文件夹下面，具体可以参考其他版本的情况，我的在下面图中可以看到

image.png
image.png

3.解决node版本问题之后再来执行cordova-hcp init，我的出现了下面的结果，网站输入自己需要上传www目录的网址，由于我网址指向的就是www文件夹,所以就没有什么www这样的字眼

image.png

4.然后执行cordova-hcp build，执行时间较长，结果如图所示

image.png
www文件夹输出如下两个文件夹，里面的信息自己查看
image.png

5.然后在config.xml里面添加如下信息config-file指向上传www目录下面的chcp.json文件下面依次是版本号,自动下载和自动更新,版本号决定是否从服务器上面获取www文件

image.png
6.然后编译app使用如下命令cordova run android，编译成功会有如下提示
image.png
7.然后手机安装

出现下面这种问题可能是node版本过高,ionic版本过低，这个时候升级ionic版本就行

image.png

热更新网站
https://blog.csdn.net/weixin_33834679/article/details/88926541
iis网站搭建
http://t.zoukankan.com/net-sky-p-13535122.html
简书热更新文章 master
https://www.jianshu.com/p/6fccaa3e71cb