码迷,mamicode.com
首页 > 移动开发 > 详细

VUE- Cordova打包APP

时间:2020-02-17 18:01:57      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:key   文件   html   web   没有   最新版   引用   软件   真机   

VUE- Cordova打包APP

 

现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题。
现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只需要一条命令就可以完成打包。

1.安装cordova
这一步的前提是已经完成安装node和npm,如果没有安装的话,请先完成node和npm的安装。
node安装:直接进入官网https://nodejs.org/zh-cn/,下载最新版本安装。安装之后在命令行中使用”node -v” 检查安装是否成功。
npm安装:由于新版的nodejs已经集成了npm,所以node安装时npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。

 

以管理员身份运行 CMD 控制台

 

使用命令

npm install -g cordova

 

来全局安装cordova,安装成功之后,使用命令

cordova -v

 

来检查是否正确安装,正确安装会显示安装的cordova版本号。

 

2.新建cordova项目


执行命令

cordova create myApp1 org.apache.cordova.myApp myApp2

 

来新建cordova项目,初始化cordova开发环境。

其中:

myApp1:cordova目录名
org.apache.cordova.myApp: 包名
myApp2: 项目名(在config.xml中查看)

生成的cordova文件中

config.xml -包含应用相关信息,使用到的插件以及面向的平台

platforms – 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库

plugins – 包含应用所需插件的 Cordova 库,使得应用能够访问例如照相机和电池状态相关的事项。

www – 包含应用源代码,例如 HTML, JavaScript 和 CSS 文件

hooks – 包含为个性化应用编译系统所需的脚本

 

进入项目

cd myApp1

 

 

使用命令,执行有点慢,稍等一会就好。

cordova platform add android

来生成Android平台的cordova库,这时platforms文件夹中会生成一个android文件夹。
技术图片

 

 

 到这里,cordova项目就已经建好了。

 

3.新建vue项目

为了方便,不需要每次编译都拷贝文件,可直接在cordova项目根目录中创建vue项目。

首先全局安装Vue-cli脚手架。

npm install -g vue
npm install -g vue-cli

 

技术图片

 

 

 

技术图片

 

 

 

新建VUE项目

vue init webpack MyApp

 

技术图片

 

 

 技术图片

 

 

 

完成之后的目录如下所示。

技术图片

 

 

 

到这里,vue项目即构建完成。

 

4.修改文件
修改Vue项目config/index.js文件.

技术图片

 

 

  

进入项目

cd MyApp

 

 

运行项目

npm run init
npm run dev

 

 

技术图片

 

 

打开地址:http://localhost:8081

技术图片

 

 

 

 

5.编译vue项目
在vue项目根目录执行命令

npm run build

 

即可编译vue项目自动到cordova主目录下的www文件夹中。

 

6.调试打包apk软件
调试打包软件之前,首先检查androidsdk是否正确安装,执行命令

cordova requirements

 

即可看到当前环境中sdk安装情况。显示如下即表示环境正确安装。(只需确认正确安装即可,不需每次都去检查)

技术图片

 

 

在cordova主目录下使用命令

cordova run android

来联调android软件(需连接真机或者模拟器)。


执行命令

cordova build android

来打包成apk软件(…myApp1/platforms/android/app/build/outputs/apk/debug/app-debug.apk)。

技术图片

 

 技术图片

 

 

7.APK签名
APK都必须经过数字签名后才能安装到设备上,签名需要对应的证书(keystore),大部分情况下 APK 都采用的自签名证书,就是自己生成证书然后给应用签名。
数字签名证书是给APK打包所必需的文件,所以我们先要把数字签名证书生成。
在命令提示符下输入

 

 

 

 

 

 

 

 

引用:https://www.cnblogs.com/qirui/p/8421372.html

 

VUE- Cordova打包APP

标签:key   文件   html   web   没有   最新版   引用   软件   真机   

原文地址:https://www.cnblogs.com/1285026182YUAN/p/12322589.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!