Vue-Vant—打包apk
目录
一、概述
二、详解
三、拓展
一、概述
App采用混合开发模式，技术选型为Vue+Vant，本文详细研究项目打包Apk的流程。Vue项目打包Apk有两种最常用的方法，其一使用Dcloud-HbuilderX打包Apk，其二使用Cordova打包Apk。
注意，本文只介绍HbuilderX打包，Cordova忽略。
二、详解
第一步：下载HbuildX
如下图所示，下载HbuilderX，地址为：https://www.dcloud.io/。
第二步：项目设置publicPath
Vue项目打包前，需设置vue.config.js文件中的publicPath属性，如下图所示。注意，如果不设置publicPath属性，则手机安装Apk后，打开项目可能出现空白页面。
module.exports = {
publicPath: './',
}第三步：项目编译
使用如下命令编译项目，成功后把dist文件夹复制到HbuilderX。
> npm run build第四步：向dist文件夹中添加manifest.json（App的配置文件）
dist文件夹中需要添加一个manifest.json文件，该文件可以使用HBuilderX创建一个5+app项目来获取，如下图所示。
第五步：修改manifest.json文件
manifest.json文件是App的配置文件，参考链接：https://ask.dcloud.net.cn/article/94。
第六步：云端打包
三、拓展
拓展1：Android数字证书介绍
打包Apk时，需要使用数字证书（.keystore文件）进行签名。数字证书是开发者的身份标识，用于表明开发者身份，使用同一个证书签发的App，默认属于同一个开发者。
Android证书的生成是自助和免费的，不需要审批或付费，创建证书时，需要注意以下问题。
1、证书文件密码（storepass）和证书密码（keypass）必须一致
2、证书别名使用英文字母或数字（老版本HBuilder不支持使用中文别名）
3、证书名称建议使用英文字母或数字，避免使用中文参考资料：https://ask.dcloud.net.cn/article/35985
拓展2：生成Android数字证书
Windows平台可以使用命令行生成证书，前提是必须提前安装JDK。参考资料：https://ask.dcloud.net.cn/article/35777。
如下代码所示，使用keytool -genkey命令生成数字证书。其中testalias是证书别名，可自定义，建议使用英文字母和数字。test.keystore是证书名称，可自定义，建议使用英文字母和数字。
> keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore
数字证书生成后，全局搜索证书位置即可。可使用如下命令查看数字证书内容，其中test.keystore是证书名称。
> keytool -list -v -keystore test.keystore 数字证书也可以在线生成，地址：http://www.applicationloader.net/appuploader/keystore.php。
拓展3：App桌面图标设置
使用HbuilderX打包时，设置App图标。
拓展4：设置沉浸状态栏
使用HbuilderX打包时，设置沉浸状态栏。打开项目的manifest.json文件，切换到代码视图，在plus -> statusbar下添加immersed节点，并设置为true。
自定义状态栏颜色，参考链接：https://ask.dcloud.net.cn/article/94。
拓展5：解决手机点一次返回键退出应用的Bug
使用HbuilderX打包Vue时，解决手机点一次返回键直接退出应用的Bug。如下代码所示，在入口文件index.html中添加如下代码。