Vue HBuilder打包为app流程

迷南。 2022-01-23 15:41 379阅读 0赞

# vue 打包为app #

记录以下自己将web app打包成移动端app的步骤及问题

事先准备，开发完成的web app项目（也可以利用vue-cli脚手架构建vue模板项目），npm run dev可以正常预览的项目

1，将项目目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: './'

2，执行npm run build之后生成dist文件夹

3，打开HBuilder，文件->打开目录，如下图

![SouthEast][]

选择刚才生成的dist目录，输入项目名称，点击完成

附HBuilder下载地址：[http://www.dcloud.io/][http_www.dcloud.io]

3，此时会看到HBuilder项目下多了一个W标识（表示web项目）的myApp项目，

![SouthEast 1][]

右键菜单选择‘转换成移动‘转换成移动App’，然后‘myApp’前面的标识就变成了‘A’,至此就已经转换成移动app了，

随后就可以利用HBuilder连接真机运行

或者发行成为原生app

注意：如果真机运行或模拟器运行报如下错误

Uncaught Error: \[vuex\] vuex requires a Promise polyfill in this browser

可参考：[http://www.jianshu.com/p/3e3b171179f8][http_www.jianshu.com_p_3e3b171179f8]

以下为以android apk为例的发行为原生app的步骤

1，点击发行，这里发布测试apk选择使用DCloud公用证书，点击‘打包’

![SouthEast 2][]

2，正在制作安装包，制作完成，手动下载

![SouthEast 3][]

![SouthEast 4][]

3，将下载的apk安装到android的手机看效果，以下是放到模拟器中的效果

![SouthEast 5][]

[SouthEast]: /images/20220123/e8d5b3b262f149f2ae2aa9002a44c174.png
[http_www.dcloud.io]: http://www.dcloud.io/
[SouthEast 1]: /images/20220123/71c15b9e31c3407baa71db45c8bbb86d.png
[http_www.jianshu.com_p_3e3b171179f8]: http://www.jianshu.com/p/3e3b171179f8
[SouthEast 2]: /images/20220123/6b30664e987742079d75c5810289465f.png
[SouthEast 3]: /images/20220123/52d22cf092d048199d4ef3a66e968567.png
[SouthEast 4]: /images/20220123/3afa98beba1741229ec94148848d39f9.png
[SouthEast 5]: /images/20220123/0b82ee189f924308bb95d08614804c63.png

发表评论取消回复

表情：

评论列表（有 0 条评论，379人围观）

还没有评论，来说两句吧...

相关阅读

相关 Hbuilder打包App

1，准备工具 Hbuilder 安卓的开发证书，iOS发布证书，描述文件， 2，打开hbuilder菜单选中如下图 ![20171223142407087][] 安

矫情吗；*/ 2022年06月03日 08:24/ 0 赞/ 270 阅读

相关利用Hbuilder把webapp打包为apk

搞了一下午的打包，把该踩的坑都踩了，终于成功打包了。我试验了两个，下面来分别介绍。 1.打包原生的webapp 准备工作：右击项目包名，转换成移动app。 ![70][]

刺骨的言语ヽ痛彻心扉/ 2022年05月22日 08:56/ 0 赞/ 700 阅读

相关 Hbuilder 打包 ios App上架AppStore流程(2018 03 16)

> 注意事项： > > 1、app不能有侵权资源，不然会被惩罚性推迟审核大概一周左右，同时使用hbuilder打包注意新版本编辑器会多个广告联盟什么的勾选项，这个勾选是默认勾

桃扇骨/ 2022年05月08日 10:14/ 0 赞/ 648 阅读

相关 Hbuilder用自有证书打包 ios App上架AppStore流程

原地址：[https://www.jianshu.com/p/665c1d67adde][https_www.jianshu.com_p_665c1d67adde]

╰+攻爆jí腚メ/ 2022年04月16日 04:36/ 0 赞/ 304 阅读

相关 HBuilder打包App的过程

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写，也可以将已经编写好的项目代码打包为手机APP。 HBui

桃扇骨/ 2022年03月24日 16:58/ 0 赞/ 345 阅读

相关 HBuilder打包App方法(图文教程)

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写，也可以将已经编写好的项目代码打包为手机APP。 HBui

深藏阁楼爱情的钟/ 2022年02月22日 02:52/ 0 赞/ 1149 阅读

相关 Vue HBuilder打包为app流程

vue 打包为app 记录以下自己将web app打包成移动端app的步骤及问题事先准备，开发完成的web app项目（也可以利用vue-cli脚手架构建

迷南。/ 2022年01月23日 15:41/ 0 赞/ 380 阅读

相关使用hbuilder打包vue APP的问题总结

最近接触到一个H5 app,我使用的是vue-cli，在把所有代码编写完成后，需要把文件打包后，上传到hbuilder转换为app，然后再打包。安装到手机上。 1.把项目打包

绝地灬酷狼/ 2022年01月07日 07:27/ 0 赞/ 356 阅读

相关 Hbuilder打包app时证书的使用

Hbuilder可以将用H5写的代码打包成apk和ipa（ios系统）。 1：打包成apk 在打包apk时需要输入包名和使用证书，包名唯一确定一个app，所以同一个app的

客官°小女子只卖身不卖艺/ 2021年11月15日 12:40/ 0 赞/ 789 阅读

相关 HBuilder 打包步骤

HBuilder 打包步骤白猫 HBuilder打包步骤：下载HBuilder ，打开HBuilder 1.导入文件（文件内 HTML 和 CSS 命名要规

逃离我推掉我的手/ 2021年11月06日 01:26/ 0 赞/ 889 阅读