使用Hbuilder X将Vue项目打包成app（Android）

最新推荐文章于 2024-09-10 11:43:18 发布
最新推荐文章于 2024-09-10 11:43:18 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44090040/article/details/109047848
版权

HBuilder提供的打包有云端打包和本地打包两种，云端打包的特点是DCloud官方配置好了原生的打包环境，可以把HTML等文件编译为原生安装包。

优点：速度快，所需要的环境少，加快了开发者速度，不会因为各种JDK，java，Android环境而无法打包生成apk或ipa头疼，大大减少了开发繁琐操作。

文章目录

一、使用步骤

1.下载Hbuilder X

下载地址
在这里插入图片描述

2. 创建移动APP项目

在这里插入图片描述
在这里插入图片描述

3. 将Vue项目打包

在这里插入图片描述
删除移动APP项目除了manifest.json和unpackage以外的其它文件，将打包以后的文件复制到项目中。
在这里插入图片描述

4. Hbuilder X 调整所需配置 （manifest.json）

在这里插入图片描述

5. 云端打包

在这里插入图片描述
在这里插入图片描述

6. 下载安装打包好的APK

在这里插入图片描述

辣条小哥哥
关注
专栏目录
Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 6924
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
HBuilderX打包H5、vue项目
bestyinjun的专栏
12-19 1758
HBuilderX打包H5、vue项目
使用hbuilderx将vue项目打包成App
啊哈前端的专栏
06-02 7006
一、打包vue web项目 1、修改build的配置 在vue-cli(2.9.x版本)下，修改config目录下index.js里面的build.assetsPublicPath(默认是/，这里在/之前加了个英文状态下的点符号) 2、运行yarn run build（我用的是yarn包管理器，如果是用npm，则运行npm run build） 打包后的静态资源文件之后会用到。 ...
使用HBuilderX 进行uniapp 打包Android APK 保姆教程
最新发布
ahualong1的博客
09-10 1013
公司业务项目需要打包apk上传的应用市场，打包过程、上架过程、审核驳回等遇到的问题解决，以及操作步骤。
python GUI框架pyqt5 对图片进行流式布局的方法（瀑布流flowlayout）
09-17
主要介绍了python GUI框架pyqt5 对图片进行流式布局的方法（瀑布流flowlayout），本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
利用HBuilderX将vue项目打包成app
Lval的博客
11-01 1531
准备开发工具 开发工具：HBuilderX 官网地址 （标准版需要自己安装插件，app开发版已经把app开发常用的插件安装好了，开箱即用，建议使用开发版） 新建项目 选择新建–>项目–>5+App–>点击创建 创建完成后你的图标会变成下面这种：5+的图标 创建完成后会出现这些文件和文件夹 其中css，img和js文件都是可以修改的 unpackage文件是存放APP图标的，...
HbuilderX将vue项目打包成apk——Android
weixin_52648390的博客
03-05 521
HbuilderX将vue项目打包成apk——Android 使用npm run build命令将vue项目打包 打开HbuilderX新建项目 3. 将新建的项目中manifest.json以外的文件删除，把上面打包的vue项目dist文件内容放进去 4. 配置manifest.json文件 5. 点击导航栏中的发行—>原生-APP云打包 6.选择Android（apk包），使用公共测试证书，点击打包 7.打包成功，控制台显示以下信息 ...
HBuilder Vue项目打包Android App
liwan09的博客
07-03 1421
一、Vue项目打包 vue项目打包前，需要修改两处代码，此两处代码修的原因是为了防止app启动时出现空白页面 1、将config/index.js 中的 build 配置中 assetsPublicPath 的值/ 修改为./ 2、由于hbuilder的默认格式，路由不能使用history模式，将src/router/index.js route history模式配置代码注释掉 Vue打包后的文件架构 二、HBuilder 将vue项目打包成Android app 准备工作 ...
uni-app vue-cli创建的项目打包成Android ios手机apk
chensi_07的博客
08-22 392
2、打开 src 目录下的 manifest.json 文件，出现如下可视化页面。第一步： 勾选需要打包为 Android 还是 ios 的手机apk。第三步：测试app包，选择公共测试证书就好了，正式上线选择自有证书。3、顶部栏 发行 -> 原生App-云打包。1、将整个项目用HBuilder X打开。第二步：填写apk打包后的名称。
初试vue-cli使用HBuilderx打包app的坑
10-16
在使用vue-cli时，HBuilderx可以提供一键打包和预览功能，通过这种方式可以将Vue项目打包成不同平台的应用程序，例如Android和iOS。 以上知识点是根据给定文件内容总结的，详细介绍了在使用vue-cli与HBuilderx进行...
Pyqt打开图片并显示
03-17
PyCharm下利用pyqt对话框打开图片，显示
pyqt5移动鼠标显示坐标的方法
09-19
今天小编就为大家分享一篇pyqt5移动鼠标显示坐标的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Hbuilder将vue项目打包为app（具体步骤和注意点）
...
10-04 4435
Hbuilder将vue项目打包为app（具体步骤和注意点）
pyqt5框内显示图像_PyQt5教程——组件 Ⅱ（八）
weixin_39646405的博客
12-22 1197
这部分的教程将会继续介绍PyQt5的组件。我们这节教程的内容将包括像素图(QPixmap),单行文本框(QLineEdit)和下拉列表框(QComboBox)像素图(QPixmap)像素图(QPixmap)是各种用于处理图像的组件中的一个。它是在屏幕上显示图片的最佳选择。在我们代码例子中，我们将使用像素图来在窗口上显示一个图片。#!/usr/bin/python3# -*- coding: utf...
使用Hbuilder打包vue项目为安卓app(含可用证书下载
cjy1575944940的博客
08-22 3494
使用Hbuilder打包vue项目为安卓app(含可用证书下载) 写文章目的：之前学习的视频里视频首先用的不是Hbuilder，是用的Sublime，他是结合apicloud来使用感觉很麻烦。上网找了下Hbuilder对此相关的详细资料也比较少 但是这！也绝不会阻挡我放弃使用Hbuilder！经过摸索后完整搞定 文章目录使用Hbuilder打包vue项目为安卓app(含可用证书下载)前期准备一、将dist文件夹转换为移动项目二、发布App最后 前期准备 前期准备是先在本地打包一次：在写完VUE项目后，
【HBuilderX】调试（Android、小程序）
joanmelon的博客
12-10 6189
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
hbuilderX uniapp 开发安卓应用，连接夜神模拟器调试
qq445829096的博客
06-18 1761
hbuilderX uniapp 开发，连接夜神模拟器调试
hbuilder项目总结：区分手机是Android系统还是ios系统
杨梦肖的博客
06-06 5834
var btnArray = [{ title: “注销当前账号” }, { title: “直接关闭应用” }]; if (mui.os.ios) {//ios不支持直接关闭应用 var btnArray = [{
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值