< 返回技术文档列表

环境安装

发布时间:2022-11-17 22:58:31⊙投诉举报

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

1.下载nvm 1.1.7的安装包

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_globalnpm 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一致处理不了,网上好多都没有--savenpm 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 insidsyscall: '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


/template/Home/Zkeys/PC/Static