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文件即可