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(installer_r24.4.1-windows.exe)

• 根据自己需要选择必要的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 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文件即可