vue脚手架项目打包成app_cordova+vue 项目打包成Android（apk）

cordova+vue 项目打包成Android(apk)应

1.安装cordova

这一步的前提是已经完成安装node和npm,如果没有安装的话，请先完成node和npm的安装。

node安装：直接进入官网https://nodejs.org/zh-cn/，下载最新版本安装。安装之后在命令行中使用”node -v” 检查安装是否成功。

npm安装：由于新版的nodejs已经集成了npm，所以node安装时npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。

使用命令

npm install -g cordova

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

cordova -v

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

2.新建cordova项目

执行命令

cordova create myApp1 org.apache.cordova.myApp myApp2cd myApp1

来新建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 – 包含为个性化应用编译系统所需的脚本

使用命令

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 init webpack MyApp

新建vue项目。完成之后的目录如下所示。

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

4.修改文件

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

5.编译vue项目

在vue项目根目录执行命令

npm run build

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

6.调试打包apk软件

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

cordova requirements

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

在cordova主目录下使用命令

cordova run android

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

执行命令

cordova-hcp build

cordova build android

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

VUE项目中获取Mac

在项目目录先运行：cordova plugin add com-badrit-macaddress

在前端项目中执行： npm i com-badrit-macaddress

在代码中获取：

window.MacAddress.getMacAddress(

function(macAddress) {alert(macAddress);},function(fail) {alert(fail);}

);