Vue项目 HBuilder X打包H5 APP

一、准备项目

HBuilder X中：新建->项目->5+app，自定义项目名称、保存路径，选择模板“默认模板”，创建。删除掉默认模板自己生成的无用的css,img,js,index.html文件夹和文件。

将需要打包APP的vue项目，先npm run build，将生成的dist文件夹中的static和index.html复制到刚刚新建的5+APP中。

二、APP配置

项目的mainfest.json文件中进行配置APP：

1、基础配置：

应用标识APP ID是登录HBuilder X账号后，自动获取填写；应用入口页面(首页)地址不用更改；其他的按需要更改

2、图标配置：

3、启动界面配置：可以直接用默认的通用启动页面

4、模块配置：包括蓝牙、通讯录、人脸识别等，按需求自行勾选。注意Push（消息推送）模块，不配置，可能会在打开APP时提示“打包时未添加push模块”，可直接参考官方文档，文章后面也有提到（http://ask.dcloud.net.cn/article/283）。

5、权限配置、APP常用其他设置、源码视图没特殊需要就不用管

三、打包

1、工具栏：发行->原生APP-云打包

2、

参考：https://www.cnblogs.com/taohuaya/p/10263519.html

3、生成证书

• 官方文档：https://ask.dcloud.net.cn/article/35777
• 安装JRE环境，找个Java后端帮忙吧，我也不会

• keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

然后在当前目录下就会生成一个文件：test.keystore

keytool -list -v -keystore test.keystore  //查看证书信息

填入证书信息：

打包时可能报错：“Google开发者证书信息有误,请重新填写相关信息 Android 证书文件不是有效的keystore文件”，参考：https://qinghai.blog.csdn.net/article/details/86595156?spm=1001.2014.3001.5506

（此图中，我是另外生成了一个新证书，可以直接运行图中第二个命令，修改已经生成的证书）

至此，打包成功。（打包的时候，控制台可能很长时间都在打印“打包状态  队列中”，等着就行）

安装后，打开APP时提示“打包时未添加push模块”，直接参考官方文档。

其实在打包前，配置mainfest.json的时候，就有Push（消息推送）模块的配置。（配置push的时候，填写的Android包名和云打包时填写的Android包名不一定要相同）