利用HBuilderX将vue项目打包成app

mac2025-05-24  42

准备开发工具

开发工具:HBuilderX 官网地址 (标准版需要自己安装插件,app开发版已经把app开发常用的插件安装好了,开箱即用,建议使用开发版)

新建项目

选择新建–>项目–>5+App–>点击创建 创建完成后你的图标会变成下面这种:5+的图标

创建完成后会出现这些文件和文件夹 其中css,img和js文件都是可以修改的 unpackage文件是存放APP图标的,可以通过后面的配置自动生成 index文件是我们的入口文件 manifest.json是打包成APP的配置文件 我们打包后生成的dist文件夹内的文件都会放到这里

将打包后的项目文件放入新建的5+APP的项目中

这是vue项目打包后生成的dist文件夹内的文件,将这些文件放入我们刚刚建立的项目目录内 将上面的文件放入我们新建的testapp文件夹内

删除无用的文件

配置

点击manifest.json进行配置 图标配置 启动图配置

其他默认配置 沉浸模式的配置:在下图位置添加下面的代码

"statusbar": { //应用可视区域到系统状态栏下透明显示效果 "immersed": true },

发行

选择发行–>原生app打包–>使用DCloud公用证书 点击打包–>打包成功后会自动返回下载链接(这会需要一些时间等待返回) 打包成功

复制返回的链接到浏览器然后选择普通下载就能下载到手机上了

最新回复(0)