ionic+angluar vscode开发环境搭建流程和项目编译打包 真机调试

没搞过ionic项目 中间遇见了很多坑,记录下环境搭建及项目编译备日后用的时候参考

整个过程:

编译器:vscode

需要安装的环境: node.js ,java jdk, gradle ,android sdk ,ionic  cordova  

nodejs java sdk gradle android 需设置环境变量 如下图

系统变量

用户变量中的path:

npm安装组件过程中遇到错误 仔细看log,查找相应解决方案:常见错误 有些组件下载不完整 或出现404 报错时

使用淘宝镜像安装 --》 两种方法 1. 安装cnmp,  npm install -g cnpm
--registry=https://registry.npm.taobao.org

2 或者设置淘宝的镜像地址  npm config set registry https://registry.npm.taobao.org

安装过程或者编译项目中会出现各种问题,但是不要怂,根据log一个一个解决就ok了,

以下是自己简要步骤

 

1.安装node.js:

去官网https://nodejs.org/en/download/安装node.js。里面带有nmp工具  

安装好后 命令窗口输入node -v ,npm 查看版本 若获取到版本号证明安装成功

配置路径缓存和模块路径:

这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。
例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图

在命令行窗口输入:


npm config set cache "D:\hybrid_about\nodejs\node_gllbal"
npm config set cache "D:\hybrid_about\nodejs\node_cache"

设置node.js环境变量

系统变量:

用户变量--》 

执行npm 命令时如果出现

这种错误一般时因为环境变量未配置对,或者命令敲错

查看是否安装成功 node -v 查看nodejs版本

npm -v --》  版本

nodejs安装和配置好安装iconic 

使用命令 

npm install -g cordova ionic

安装成功后是如下提示:

安装好以后

,我是直接编译的项目,但是项目中只有前端代码 ,代码中用的库都要自己去编译

未编译前的项目结构:

编译好的项目目录结构:

可以看到多了好多包,这是vscode中显示的结构,其它编译器暂不知

开始编译项目:直接在vc中打开terminal终端(或者在项目根目录) ->

命令ionic info 查看环境中配置信息,缺少什么会有显示

1.添加android /ios 平台 ionic cordova platform
    ionic cordova platform add android / ios 

执行 nmp install 导入依赖的库

全部导入后

执行ionic serve 即可运行到浏览器 

执行这个命令会出现各种各样问题,看到问题根据报错信息去改就可以了----

如果编译成功后 可以直接在chrome中运行调试, 这时会出现跨域问题, 装一个支持跨域的插件 Allow-control-allow-origin  就可以解决了

打包:

打debug包:---》       ionic cordova build android

打签名包:---》 
  1  首先执行:ionic cordova build android --release

生成未签名的包;

2 )使用keytool生成keystore文件 
keytool是JDK自带的加密工具,我们需要生成一个keystore文件,然后保存好,之后不需要每次都生成新的。 
运行命令行: keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000 

之后会让我们设置一些密码和安全问题,根据命令行提示进行设置即可,最后会在当前命令行执行的目录下自动生成默认名为my-release-key.keystore文件。如果你设置了alias_name,那么文件就是你设置的名字。validity 10000代表文件的加密时间为10000天、

3 到项目根目录下   jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore platforms/android/build/outputs/apk/android-release-unsigned.apk alias_name
--------------------- 
 

真机调试的话 需要工具: chrom+ android机

打包运行到手机上后,插上usb, 打开网页   chrome://inspect/#devices   点击inspect

需要科学上网 才能连接到手机

高德地图需要申请两个key 一个android的,一个web的,webkey用于引入地图

猜你喜欢

转载自blog.csdn.net/qq_36174100/article/details/84255474