Vue项目 HBuilder X打包H5 APP |
您所在的位置:网站首页 › vue生成的h5页面 › 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包名不一定要相同) |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |