使用HBuilder将Vue项目或原生项目打包App教程(图文教程)

一:如果是vue项目,先将项目yran build打包成dist文件
如果是原生项目,将所有文件放在一个文件夹中
vue项目
使用HBuilder将Vue项目或原生项目打包App教程(图文教程)_第1张图片
原生项目图片
使用HBuilder将Vue项目或原生项目打包App教程(图文教程)_第2张图片
二:在HBuild中打开项目
使用HBuilder将Vue项目或原生项目打包App教程(图文教程)_第3张图片
三:打开指定文件夹
使用HBuilder将Vue项目或原生项目打包App教程(图文教程)_第4张图片
四:右键转换成App类型
使用HBuilder将Vue项目或原生项目打包App教程(图文教程)_第5张图片
五:然后配置manifest.json文件里内容
应用信息配置
appid点击云端自动获取
填写应用名称
勾选应用是否选用全屏
选择自动横竖屏使用HBuilder将Vue项目或原生项目打包App教程(图文教程)_第6张图片
图标配置
使用HBuilder将Vue项目或原生项目打包App教程(图文教程)_第7张图片
启动图片配置、SDK配置选择默认项
模块权限配置
里面有警告或者错误信息,要删除
使用HBuilder将Vue项目或原生项目打包App教程(图文教程)_第8张图片
页面引用关系配置
直点起结束即可
六:运行
确保手机通过usb连接到电脑端,并且保持检测可用状态
使用HBuilder将Vue项目或原生项目打包App教程(图文教程)_第9张图片
七:发行
使用HBuilder将Vue项目或原生项目打包App教程(图文教程)_第10张图片
八:选择打包状态,我这里选择的是安卓打包
使用HBuilder将Vue项目或原生项目打包App教程(图文教程)_第11张图片
九:打包状态
使用HBuilder将Vue项目或原生项目打包App教程(图文教程)_第12张图片
十:下载即可使用
使用HBuilder将Vue项目或原生项目打包App教程(图文教程)_第13张图片
十一:完成
使用HBuilder将Vue项目或原生项目打包App教程(图文教程)_第14张图片

你可能感兴趣的:(HBuilder打包,vue.js,javascript,html5)