Cordova+Vue打包Android Apk

文章目录

    • Cordova打包Vue移动端项目Android
      • 环境要求
      • 安装Cordova
      • 安装Android SDK
      • 安装Gradle
    • Cordova创建项目
    • Vue项目使用Cordova打包
      • 创建一个的Vue项目
    • github源码

Cordova打包Vue移动端项目Android

环境要求

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

安装Cordova

npm install -g cordova

在这里插入图片描述

安装Android SDK

下载安装Android SDK installer_r24.4.1-windows.exe,安装你所需要的Android API
Cordova+Vue打包Android Apk_第1张图片
配置Android SDK环境变量

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

Cordova+Vue打包Android Apk_第2张图片

安装Gradle

Gradle官网安装下载

下载后解压文件
Cordova+Vue打包Android Apk_第3张图片
配置Gradle环境变量

Cordova+Vue打包Android Apk_第4张图片
查看已安装Gradle版本
Cordova+Vue打包Android Apk_第5张图片

Cordova创建项目

cordova build portal-vue
cordova platform add android --save

查看环境要求是否符合,如下图符合
cordova requirements
Cordova+Vue打包Android Apk_第6张图片
构建APP,并运行demo
Cordova+Vue打包Android Apk_第7张图片

原始默认生成项目的apk打包
Cordova+Vue打包Android Apk_第8张图片
默认效果
Cordova+Vue打包Android Apk_第9张图片
接下来的步骤就是将vue项目整合到Cordova项目里面

Vue项目使用Cordova打包

创建一个的Vue项目

在新建的gradle项目portal-vue下新建vue项目vdemo
vue create vdemo
Cordova+Vue打包Android Apk_第10张图片

修改配置文件vue.config.js

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

打包vue项目,生成dist目录
Cordova+Vue打包Android Apk_第11张图片
将dist目录下文件拷贝到www/路径下,替换原来下面的内容
打包成 Apk文件
cordova build android


浏览器预览:
http://localhost:8000/android/www/index.html
cordova serve android
真机预览直接将打包后的apk文件用安卓手机即可查看效果。

Cordova+Vue打包Android Apk_第12张图片
至此,一个简单的Vue项目通过Cordova打包成 Android APK了。

github源码

Duebasslei/cordova-vue-android

你可能感兴趣的:(Vue,android,vue,cordova)