Vue项目打包成app——Cordova

Cordova是使用HTML、CSS和JavaScript构建的混合移动应用程序的平台。 官网：https://cordova.apache.org/ 中文官网：http://cordova.axuer.com/

开发环境及工具

开发环境

操作系统： Windows 10 nodeJs：需要使用其npm包管理工具安装Cordova Java环境： 下载安装jdk http://www.oracle.com/technetwork/java/javase/downloads/index.html 配置JAVA_HOME环境变量，指定为JDK安装路径 Android环境： 下载安装Android JDK() 根据自己需要选择必要的API 配置ANDROID_HOME环境变量，指定为Android jdk安装路径

工具

1、VS code 2、Android Studio（可选） 3、夜神模拟器

教程

一、安装cordova生成app

npm安装cordova npm install cordova -g 创建cordova项目 cordova create hello(项目名) 或者使用完整形式 cordova create hello(项目名) com.example.hello（包名） HelloWorld（程序标题） 进入当前项目 cd hello 添加平台 浏览器：cordova platform add browser iOS：cordova platform add ios --save Android：cordova platform add android --save

可以通过cordova platform ls查看当前已经安装的运行平台 注意：运行iOS或Android需要安装对于的sdk

检查构建app的条件 cordova requirements

如上环境还没有装好，继续根据提示安装Android SDK和gradle

安装Android SDK 可以通过官网下载(),也可以通过安装 Android Studio开发工具会自动下载 配置环境变量 在电脑属性里面打开高级系统设置，选择高级中找到环境变量进行系统变量的配置如下：

再修改path变量

保存后记得重新打开cmd才生效！！！！

安装gradle 下载 配置环境变量 地址也是选择自己安装包的地址 修改path变量指向gradle下的bin目录

最后重启cmd查看Cordova环境是否安装成功

构建APP并运行demo 执行cordova build android，出现如下页面显示BUILD SUCCESSFUL则构建apk成功

在成功标识后面有打包成功的apk路径，在文件夹中找到apk选择使用模拟器打开（个人用的是夜神模拟器）或使用安卓手机安装打开即可。

二、绑定vue项目

可以选择直接导入打包好的vue文件或者在该Cordova项目中再建一个vue项目开发。 这里因为我前期自己已经搭建了一个vue项目，直接选择导入的方式。

打包vue 通过npm run build（此处根据自己配置的package文件确定命令，一般为build）打包文件在dist目录下，如下展示 迁移到Cordova项目 将dist目录下的文件复制粘贴到之前创建的Cordova项目的www目录下，记得选择替换！！！ 运行打包apk文件（详细如一最后描述） cordova build android 最后用模拟器打开生产的apk文件即可