Cordova+Vue打包Android Apk

文章目录

• 
  
• ​​Cordova打包Vue移动端项目Android​​
• • • 
      
  • ​​环境要求​​
  • ​​安装Cordova​​
  • ​​安装Android SDK​​
  • ​​安装Gradle​​

  
  

​​Cordova创建项目​​​​Vue项目使用Cordova打包​​​​github源码​​

Cordova打包Vue移动端项目Android

环境要求

1. 1. 
      
2. Cordova
3. Gradle
4. Android SDK
5. Java JDK
6. Node.js
   1. 
      

安装Cordova

​​npm install -g cordova​​

安装Android SDK

下载安装Android SDK ​​installer_r24.4.1-windows.exe​​,安装你所需要的Android API

配置Android SDK环境变量

ANDROID_HOME: C:\Users\Gaolei\AppData\Local\Android\android-sdk

安装Gradle

​​Gradle官网安装下载​​

下载后解压文件

配置Gradle环境变量

查看已安装Gradle版本

Cordova创建项目

​​cordova build portal-vue​​

​​cordova platform add android --save​​

查看环境要求是否符合,如下图符合

​​cordova requirements​​

构建APP，并运行demo

原始默认生成项目的apk打包

默认效果

接下来的步骤就是将vue项目整合到Cordova项目里面

Vue项目使用Cordova打包

创建一个的Vue项目

在新建的gradle项目portal-vue下新建vue项目vdemo

​​vue create vdemo​​

修改配置文件​​vue.config.js​​

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static'
}

打包vue项目，生成dist目录

将dist目录下文件拷贝到​​www/​​路径下，替换原来下面的内容

打包成 ​​Apk​​文件

​​cordova build android​​

浏览器预览:

​​​http://localhost:8000/android/www/index.html​​​

​​cordova serve android​​

真机预览直接将打包后的apk文件用安卓手机即可查看效果。

至此，一个简单的Vue项目通过Cordova打包成 Android APK了。

github源码

​​Duebasslei/cordova-vue-android​​