android+cordova+windows打包vue一条龙服务

最新推荐文章于 2024-03-18 23:36:24 发布

梦不觉=_=

最新推荐文章于 2024-03-18 23:36:24 发布

阅读量566

点赞数 1

文章标签： android

本文链接：https://blog.csdn.net/JiaoKunGe/article/details/105318614

版权

android+cordova+windows打包vue全家桶套餐

说到安卓打包就不得不用到android-sdk了，我常用两种工具来管理，android studio和sdk Manager，这里我就小白推荐用sdk Manager可以增加知识储备。

一、sdk Manager下载
sdk Manager下载戳这里
 若有想下载android studio的…
在这里插入图片描述

二、sdk下载与环境变量的配置
值得一提的是如果你使用android studio的话，恭喜你，它会自动帮里下载最新android并配好环境变量（我第一次就是这样的==）！！！好了，话不多说，直接上图~

这里值得一提的是下载时间很长，你可以使用对应的镜像加快下载速度，若和我一样的小白我建议在网络允许的情况下还是不要用镜像吧（主要是容易出毛病，第一次我是一路百度走的，偶尔会差一些莫名其妙的东西--）！
这里给需要的同学提供我知道的一些镜像服务器地址：
1、中科院开源协会镜像站地址:
IPV4/IPV6 : http://mirrors.opencas.ac.cn 端口：80

2、北京化工大学镜像服务器地址：
IPv4: http://ubuntu.buct.edu.cn/ 端口：80
IPv4: http://ubuntu.buct.cn/ 端口：80
IPv6: http://ubuntu.buct6.edu.cn/ 端口：80

3、大连东软信息学院镜像服务器地址:
http://mirrors.neusoft.edu.cn 端口：80

在这里插入图片描述

配置环境变量
方法和设置JAVA JDK的环境变量的方法类似，“右键我的电脑”—“属性”—“高级系统设置”—“环境变量”—“系统变量”—“新建”——变量名：ANDROID_HOME

在这里插入图片描述
在新建完ANDROID_HOME之后，找到Path变量，然后双击打开Path 变量并新建：
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools

最后，测试一下是否成功：开始-运行-输入cmd-在终端输入
命令：android -h
如果输出这一堆东西那么恭喜你android-sdk已经装好了，准备工作完成一半了！
在这里插入图片描述
三、node安装
要知道cordova是基于node.js的，但如今node版本如此之多且杂，那么我们该选那一版呢？这里我给小白推荐一下nvm，简单来说nvm就是一个管理node的插件，作为小白我就不多介绍了，详情请看：
https://www.jianshu.com/p/d0e0935b150a

四、下载安装cordova
经过前三步需要的依赖都准备好了，终于要进入代码阶段了，相信作为小白，你我都经历了漫长而枯燥的时光~~
如果对自己的网速没信心，请先安装淘宝镜像（安装后以下所有npm都替换成cnpm）：
打开命令提示符或者终端执行：
npm install -g cnpm --registry=https://registry.npm.taobao.org

1、全局安装cordova：npm install -g cordova并执行：cordova -v 这里的提示选n，只要出现版本号就代表安装成功而了在这里插入图片描述
2、创建cordova项目并添加平台
打开命令提示符或终端td到项目目录下执行:
cordova create myFirstcordovaApp com.cordova.myFirstApp
其中：
myFirstcordovaApp指的是cordova打包项目的名称
com.cordova.myFirstApp是打包后包名
创建项目时有时会报错
在这里插入图片描述
百思不得其解，于是我 cnpm uninstall -g cordova再cnpm install -g cordova@低版本号（目前最新9.0.0），这就成功了？？？于是我发现npm和cnpm是node的指令，那是不是node的版本有指定的cordova版本呢？经过一番实验，我的猜想没有错，具体版本对应区间请自行百度。。。
在这里插入图片描述
生成的myFirstcordovaApp文件中
config.xml -包含应用相关信息，使用到的插件以及面向的平台
platforms – 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库
plugins – 包含应用所需插件的 Cordova 库，使得应用能够访问例如照相机和电池状态相关的事项。
www – 包含应用源代码，例如 HTML, JavaScript 和 CSS 文件
hooks – 包含为个性化应用编译系统所需的脚本

然后进入myFirstcordovaApp目录cd myFirstcordovaApp
添加平台：
android：cordova platform add android
ios：cordova platform add ios

这里添加的是android，命令运行后出现以下信息则表示添加成功
在这里插入图片描述
Android project created with cordova-android@5.1.1，注意了：不同cordova版本对应了不同版本的android版本，如果android sdk中没有提示版本的android，那么你该去下载了朋友，不然会报错，本文可直接用步骤二中的sdk Manager工具安装。

四、创建vue项目
cordova可打包很多类型移动端项目，而移动端常用vue，本文就以vue为例

1、创建vue项目
如果你还不会创建vue项目详情请看：https://cn.vuejs.org/
本文不做过多介绍，直接上代码：
npm install -g vue
npm install -g vue-cli
vue init webpack myfirstapp //项目名不能有大写字母(会自动驼峰命名)，不然会报提示错误不让创建！
在这里插入图片描述
在打包之前，我们进入vue的项目的config目录，找到index.js，找到build中的部分（注意：若用的vue-cli3.0则有单独的vue.config.js文件）：

首先试运行vue项目（记得npm i），如果运行成功，则打开终端或者命令窗口，输入npm run build。
打包成功后，把打包后的dist中的文件，包括static文件夹和index.html放到cordova项目中的www的文件夹下（若图中地址是myFirstcordovaApp/www目录则不需要）

补充：
值得注意的是，当你的cordova版本较新时，需手动安装gradle，其版本也与cordova版本有对应关系，请自行查找，但一般下最新的稳定版即可（貌似向下兼容2个大版本），下载后需配环境变量哦，具体下载细节请百度(=_=)
在这里插入图片描述

然后进入cordova项目的文件夹下（cd myFirstcordovaApp）
执行cordova build android
在这里插入图片描述
好吧，报错不是错，就怕不报错，解决问题为走起
先sdk manager下载android-23(android6.0)

在这里插入图片描述
好吧貌似是需要网络下载打包配置文件，但没下下来（可能是个人网络问题*_*）
这里注意了，若是最新版的cordova可直接去https://services.gradle.org/distributions/下载最新版本gradle解压并配置环境变量（自行百度），但本文用的是cordova@6.0.0，经过大量测试你需要将指定的gradle（压缩包）下载下来后
在这里插入图片描述

经过漫长的等待。。。。。。

特别黑科技：
当我开发接上后端接口时发现，我辣么多数据一个都不见了！！！调试全是：

net::ERR_CLEARTEXT_NOT_PERMITTED

原因是android9开始不允许http，当遇到这种情况时：

解决办法，在(platforms\android\app\src\main目录下)AndroidManifest.xml的applicatioin节点加android:usesCleartextTraffic=“true” 属性

 <manifest ...>
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
   </manifest>

五、打包常见深坑
1、node、cordova、android sdk三则版本问题，对于小白来说可能无从下手，我的建议是：
1.将三则全部卸载；
2.先装node.js，再装cordova(cordova基于node)、最后下载sdk Manager(个人觉得android studio自动配置sdk经常导致cordova打包sdk报错=_=)，并将android sdk(10~8)全下载下来

2、node插件包不全(node_modules)
npm i下载，若不行将node_modules删除，安装淘宝镜像，执行cnpm i（有时npm i下载网速影响，导致部分包下载不全），并且细心的下伙伴会发现再打包时也时会下载一些网络资源的（主要是gradle问题）

3、打包日志冲突在这里插入图片描述
打包一次会生成日志（无论成功或失败），有时打包错误，有可能会影响日志输出，此时只需将日志目录清空

4、中文路径
在此严重警告刚写代码的程序员，项目路径切忌不要出现中文路径（==），即使你运行时没有任何错误也请不要进行如此降智操作。如果你按照正常步骤进行安装和打包，在打包时依旧报各种插件配置错误，那么请回去看看你的项目路径是否有中文（来自我一个4年工作经验的老同事的SB行为**）。

诸如：E:\我的所有项目\10SRC\01CCPB 此类路径

5、平台接口失效

Cannot find module 'F:xxx\Api.js'

关于此现象的出现做个简单说明：
由于此前做了一个uniapp的项目，使用了最新版本的AndroidStudio，并进行了sdk的托管，结果导致出现上述现象，一度以为android包除了问题，于是android -v发现：

android -v
**************************************************************************
The "android" command is deprecated.
For manual SDK, AVD, and project management, please use Android Studio.
For command-line tools, use tools\bin\sdkmanager.bat
and tools\bin\avdmanager.bat
**************************************************************************

好家伙，都不让使用adndroid命令了，于是检查环境变量配置，发现无任何问题，于是百度发现新版的SDK tools中的android命令已经不支持部分 android命令了，但我只是打个包，又不需要android命令😂，于是：

cordova platform rm android

再重新添加android平台就ok啦

cordova platform add android

6.build tools损坏
在这里插入图片描述
遇到这种情况：

梦不觉=_=

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
android+cordova+windows打包vue一条龙服务

android+cordova打包一条龙说到安卓打包就不得不用到android-sdk了，我常用两种工具来管理，android studio和sdk Manager，这里我就小白推荐用sdk Manager可以增加知识储备。一、sdk Manager下载sdk Manager下载戳这里若有想下载android studio的…二、sdk下载与环境变量的配置值得一提的是如果你使用and...
复制链接

扫一扫