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、图标配置:

Vue项目 HBuilder X打包H5 APP

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

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

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

三、打包

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

2、

Vue项目 HBuilder X打包H5 APP

参考: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

Vue项目 HBuilder X打包H5 APP

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

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

Vue项目 HBuilder X打包H5 APP

填入证书信息:

Vue项目 HBuilder X打包H5 APP

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

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

Vue项目 HBuilder X打包H5 APP

Vue项目 HBuilder X打包H5 APP

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

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

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

Vue项目 HBuilder X打包H5 APP

上一篇:JavaSE-17.3.1【IO流的概述、分类、使用场景;字节流写数据】


下一篇:JAVA之IO技术 分割文件