最流行的两种vue打包成apk框架，简述

最流行的两种vue打包成apk框架

1、使用Dcloud-HbuilderX打包app

• 基础打包(可以忽略)

  • 配置manifest.json文件
  • 在HbuilderX中找到:发行—>原生app打包(云打包)
  • 注意HbulderX一个账号只打包5次。
  • 等待一段时间打包成功，查询打包状态，返回一个网站，打开下载即可。

• Vue项目打包app

  • 首先得下载HBuilderX:[传送门]https://www.dcloud.io/

  

  • 打包Vue项目前得修改vue.config.js文件(如果没有在项目根目录新建)

    module.exports = {
      publicPath: './',
    }

  • 把vue项目打包成开发模式

    • 运行 npm run build

  • 然后把开发模式的dist文件复制到HBuilderX中

  • 然后复制一个manifest.json文件到dist中与HBuilder项目文件保持一致。

+ manifest.json可以再HBuilderX中新建一个5+app项目来获取

• 修改manifest.json文件配置
  
• 进行云打包或本地打包。

• 如果遇到打开项目空白的坑（一般修改vue中的vue.config.js文件就没问题）

  • 暂时可以修改进入口文件来解决
  • 进入manifest.json文件选择基础配置—>修改应用入口文件
  • 修改成可运行的网站即可,例如：http://xxxx:9902
  • 它可以通过网站进入你的vue项目,但前提得把vue项目运行并获取到此网站地址。

2、使用Cordova打包Vue app

• 首先安装全局Cordova

npm i -g cordova

• 选择一个文件夹并创建Cordova项目

cordova create cordova-project

• 切换到项目中并添加Android平台

cd cordova-project
cordova platform add android --save

• 基础cordova环境是否能过继续

cordova requirements

• 如有一处没有通过，即可百度搜索解决

• 最有可能出现的错误是未安装Gradle

  • 解决：进去[官网下载传送门][https://gradle.org/releases/]
  • 下载后解压并复制bin路径
  • 填入到环境变量中
  • gradle -version检测是否安装成功

• 如果需要打包vue项目apk得

  • 首先修改vue项目中的vue.config.js(如果没有在项目根路径创建)

    module.exports = {
      publicPath: '',
    }

  • 打包成dist文件

    npm run build

  • 将vue打包后的dist里的所有文件替换到cordova**创建的项目(cordova-project)**里的www文件里。

• 运行到手机：如果运行失败，可尝试打包apk

cordova run android

• 打包apk(他会给你个地址进入取出即可)

cordova build android

• 如果想要修改打包后的apk名以及apk图标

名字：config.xml文件

k(他会给你个地址进入取出即可)

cordova build android

• 如果想要修改打包后的apk名以及apk图标

名字：config.xml文件

图表：进入cordova-project文件里的platforms里的android后面文件结构与androidstudio一样。