Vue工程利用HBuild X打包APP的方法

已于 2022-07-05 22:08:34 修改
阅读量828 收藏
点赞数
分类专栏： vue HBuildX 文章标签： vue.js android android studio web app
于 2022-07-05 22:05:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42365842/article/details/125628733
版权

HBuild X能够方便的将Vue工程打包成apk文件。
具体步骤如下：

  1. 在HBuild X中新建工程
    打开HBuild X后新建工程，创建5+App工程
    在这里插入图片描述
    创建结果如下图
    在这里插入图片描述

  2. 打包Vue工程文件
    打开Vue工程，在工程目录下输入

    npm run build

    这里我使用的WebStorm 在这里插入图片描述
    打包得到dist文件夹 ，favicon.ico为图标可以进行替换
    在这里插入图片描述

  3. 将dist文件里的内容复制到HBuild X里
    注意不要复制dist文件夹，而是文件夹里的内容
    选择全部覆盖在这里插入图片描述

  4. 点击HBuild X上方的发行，原生App-云打包
    在这里插入图片描述
    这里需要导入Android证书
    在这里插入图片描述

  5. 使用Android Studio生成的自己的Android证书
    Android Studio需要自行下载
    点击Build、Generate Signed Bundle/APK…
    在这里插入图片描述
    点击创建新的证书
    在这里插入图片描述
    输入证书保存路径和相应的证书别名和密码，创建完后一定要记得别名和密码~
    在这里插入图片描述

  6. 回到HBuild X进行打包
    在打包之前主要点击manifest.json可以对APP进行一些设置，如APP的图标可以在图标配置中修改
    在这里插入图片描述在这里插入图片描述
    输入证书别名，导入证书，并输入密码，点击打包

  7. 等待云打包的完成即可
    不同时间段等待时间不同~~
    在这里插入图片描述
    当出现以下文字代表打包完成
    在这里插入图片描述
    点击打开所在目录即可查看apk文件，现在可以发给好友下载使用了哦~
    在这里插入图片描述
    注：这样打包可能会出现APP打开一片空白的情况，这是由于静态资源路径的问题，解决方法具体可以关注我的下一篇~~

做的第一个APP，还有点小激动hhh~~

葡萄汁suki
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初试vue-cli使用HBuilderx打包app的坑
10-16
主要介绍了初试vue-cli使用HBuilderx打包app的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli或vue项目利用HBuilder打包成移动端app操作
10-15
Vue CLI或Vue项目利用HBuilder打包成移动端App的操作流程涵盖了多个关键步骤，这些步骤对于将Web应用程序转换为可在移动设备上运行的应用程序至关重要。以下是详细的知识点解释： 1. **测试项目**： 在开始打包...
Hbuild X 打包 混合式app
weixin_30610755的博客
07-03 273
1、调用原生方法的接口文档：http://ask.dcloud.net.cn/docs/（亲测有效，使用js 调用原生的设备方法是可以的） 2、HbuildX 可以直接真机调试的。(亲测有效，安装好软件，插件后，可能需要重启下 HbuildX) 转载于:https://www.cnblogs.com/wfblog/p/11127850.html...
HBuildX的打包 原生App配置
wyn5210的博客
07-12 570
HBuildX的打包 原生App配置
uniapp打包和发布APK教程
renkai721的专栏
05-20 1678
hbuilderx打包apk，android studio打包apk文件
HBuilderX打包uni-app项目成安卓app
最新发布
吴某某人的笔记
06-03 694
添加依赖，从这个目录Android-SDK@4.15.82065_20240508\SDK\libs拷贝以下文件到工程下，并再gradle中添加依赖。5、在hbuider生成uniapp工程的app资源。4.5、替换app图标或进入页面图片（可选）此处修改成4.1的key信息。此处修改成3.3配置的包名。生成的信息放入工程目录下。将文件拷贝进去工程替换。
VUE打包APP的方法过程遇到的问题（HBuilder 打包方式）
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
01-25 1536
大家都知道VUE项目通过HBuilder X进行打包成APP，参考步骤：利用HBuilderX将vue项目打包成app 大家打包过程会发现：勾选DCloud老版本正式（我使用的是HBuilder X2.8以上版本）都要求实名制了，比较麻烦，不想实名制，实名制后然后又要啥来着。然后就选择了“使用公共测试证书”选项，发现这个打包过程还是失败，还要求开通什么账号，可能还要付费之类的： 以上方法行不通，没办法，我只选择“使用自有证书”，也就是自己做证书，或者第三方傻瓜式自动生成证书：https://ww..
用hbuild打包vue webApp
weixin_41421227的博客
02-25 454
打包白屏问题参考：https://blog.csdn.net/u010212601/article/details/82350252 手机物理回退按钮问题参考：https://blog.csdn.net/brake_lzk/article/details/80678567 npm run build 报以下错 解决方法：npm i webpack-cli -g   针对打包后背景图片...
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
10-14
主要介绍了浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目用HBuilder打包APP.docx
09-09
通过以上步骤，你不仅学会了如何使用Vue和HBuilder X打包APP，还了解了如何处理安卓设备上的特定问题，如两次滑动退出和刘海屏适配。现在，你可以按照这些步骤，将你的Vue项目转化为可在手机上运行的APP，并享受...
HBuilder开发App教程03-定制图标，启动页以及打包
adr5970的博客
05-21 584
helloworld 上次说到了helloworld。你应该已经能够新建项目。真机调试了， 这次来说说图标的定制，启动页的定制以及打包。 图标定制 假设不定制图标的话，默认会是博文顶部图表的样子， 你肯定不想这个样子，来吧。定制一个自己的图标吧。 打开项目下的manifest.json，选择底部的图标配置（老版本号需升级到最新版）。 然后选择一个制作...
如何优雅的使用vue+Dcloud（Hbuild）开发混合app
weixin_33748818的博客
05-22 529
如何优雅的使用vue+Dcloud（Hbuild）开发混合app 最近在做混合app，前端框架用的是vue，打包app使用的是Dcloud，不过在开发过程中有一点不爽的是，如果想使用Dcloud提供的plus这个环境变量，难倒每次都得使用npm run build先把vue打包，然后再用Hbuild打开dist文件夹，然后再手机上运行查看...
HBuilder X|5+App|实现微信界面下方的图标显示
weixin_48215313的博客
09-13 922
1.需要的东西 window10,HBuliderX 2.打开HBuliderX，新建一个5+App项目,选第二个模版 3.按快捷键mt自动弹出mTab(底部选项卡） ps:mb-->mbody身体 mh-->mhead头部 mt-->mtab尾部 ml-->mlist列表 ma-->maccording折叠面板/mactionsheet操作表 mb-->mbadge数字角标/mbutton按钮 现在只学了这么多，其他继续努力学。。。 .
Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 6228
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
用HbuilderX将vue项目打包app基本步骤
lqx_520的博客
08-11 904
首先打包你的 vue 项目 生成 dist 文件夹 （请确保 你是 将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，打包生成的 dist 文件） ...
[ Vue ] HBuilderX打包APK流程及问题
weixin_37629822的博客
04-30 1195
一、背景: 1. Vue 手机端 项目在WebStrom中创建并开发后，需要通过HBuilderX打包为apk 2. 脚手架Vue CLI 4.X 3. HBuilderX 二、解决问题 1. 解决HbuilderX打包后项目空白问题 2. 解决打包后路由跳转问题 三、操作步骤： 1. 关闭路由的history模式 2. 根目录创建vue.config.js文件并添加生产环境...
【Hbuilder】Hbuilder 插件[App]云打包安装失败--已解决
amoureux555的博客
07-13 2442
插件[App]云打包安装失败!
HbuilderX打包AndroidAPP使用教程
热门推荐
weixin_54074788的博客
10-26 1万+
HbuildX打包AndroidAPP使用教程
uniapp打包apk时修改APP应用图标和名称
zh626678的博客
03-15 2541
uniapp在打包apk时如何修改APP应用图标和名称
vue项目使用Hbuilder打包成app，详细步骤
06-07
下面是使用 Hbuilder 将 Vue 项目打包成 app 的详细步骤： 1. 安装 Hbuilder 首先需要安装 Hbuilder，可以从官网下载并安装。 2. 创建 Vue 项目 使用 Vue CLI 创建一个新的 Vue 项目。在终端中运行以下命令： ``` vue create myapp ``` 其中，“myapp”是项目名称。 3. 构建 Vue 项目 在 Vue 项目的根目录中运行以下命令，构建项目： ``` npm run build ``` 这将生成一个“dist”目录，其中包含构建后的 Vue 应用程序的文件。 4. 导入项目 在 Hbuilder 中创建一个新项目。选择“新建项目”->“HTML5+移动应用”，然后选择“导入已有的 HTML5+工程”。 在“导入工程”对话框中，选择“选择本地目录”，然后选择 Vue 项目的“dist”目录。 5. 配置应用程序 在 Hbuilder 中，打开“manifest.json”文件，配置应用程序的名称、ID、版本号等信息。 6. 添加插件 要访问设备功能和硬件，需要通过 Hbuilder 插件来实现。可以使用插件管理器来查找和安装需要的插件。 例如，要在应用程序中使用相机，可以执行以下步骤： - 打开“插件管理器”。 - 选择“搜索”选项卡。 - 搜索“camera”。 - 选择“安装”按钮。 这将安装相机插件。 7. 构建应用程序 在 Hbuilder 中，选择“运行”->“运行到手机或模拟器”，然后选择要运行应用程序的设备。 Hbuilder 将使用已安装的插件和配置文件构建应用程序，并将其安装到设备上。 这是使用 Hbuilder 将 Vue 项目打包成 app 的基本步骤。可以使用类似的步骤将其打包为 iOS 应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值