利用HBuilder将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，文件-&打开目录，如下图
选择刚才生成的dist目录，输入项目名称，点击完成
附HBuilder下载地址：
3，此时会看到HBuilder项目下多了一个W标识（表示web项目）的myApp项目，
右键菜单选择‘转换成移动‘转换成移动App’，然后‘myApp’前面的标识就变成了‘A’,至此就已经转换成移动app了，
随后就可以利用HBuilder连接真机运行
或者发行成为原生app
注意：如果真机运行或模拟器运行报如下错误
Uncaught Error: [vuex] vuex requires a Promise polyfill in this browser
以下为以android apk为例的发行为原生app的步骤
1，点击发行，这里发布测试apk选择使用DCloud公用证书，点击‘打包’
2，正在制作安装包，制作完成，手动下载
3，将下载的apk安装到android的手机看效果，以下是放到模拟器中的效果
然后就可以在手机上玩啦~
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！Vue开发WebApp快速转为原生手机App？试水HBuilder打包 - 简书
Vue开发WebApp快速转为原生手机App？试水HBuilder打包
201705 更新：建议用成熟的Phonegap打包，参见：
Vue是前端快速开发框架，Javascript+手机UI，就可以迅速开发网页应用（WebApp）
一般情况下，作为演示网站、微信后台等等，也够用了
Weex作为一次开发，三端可用（Web、安卓、IOS），应该不错，不过现在还没正式版
偶尔碰到HBuilder这个国人工具，能直接将WebApp（HTML+CSS+javascript），打包成原生安卓App，那就试试吧
Web应用打包成手机App，重点考查：
功能完善度
开发便捷度
步骤如下：
开发Vue WebApp
HBuilder引入第一步的WebApp
打包成原生App
App安装到手机
1. 开发Vue WebApp
引入一个最近比较火的：Vue+Muse-UI写的《高仿网易云音乐》
作者Github:
netEaseMusic.png
npm run build (有个Eslint错误，请自行修改一下\NeteaseCloudWebApp\src\views\playerDetail.vue:125行，多一个空格)
产生 dist/目录（内含index.html和static/目录）
2. HBuilder引入第一步的WebApp
在HBuilder官网，下载HBuilder
创建一个空白模板的移动App
new 移动App
打开第一步build产生的index.html，复制内容到HBuilder里的index.html。
就是CSS、JS和&div id=app&&/div&
modify index.png
复制第一个build产生的static/目录，到HBuilder本项目目录下
copy static dir.png
手动修改index.html里，对static的引用。去掉=后的“/”
remove slash.png
另外，在index.html &head&&/head&之间，加上Material-Icon的引用，这是Muse-UI需要的
&link href="http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"&
这时，点击一下浏览器预览，应该能正确显示WebApp了：
browser preview
3. 真机调试
这里比较坑，首先，你要安装360手机助手，电脑、手机端都需要！
大家都知道360是啥德性，;(
安装完之后，手机拿USB线连接电脑，360手机助手连接，点击HBuilder的在设备上运行：
傲游截图02.png
电脑上会提示进度：
傲游截图25.png
手机上会自动运行这个App:
流畅度不错，虽然现在还是WebApp，感觉跟原生的没啥区别。轮播为啥是空的？？还没去研究。。。
4. 打包成原生App
到重点了！我们要打包成原生手机App了！
HBuilder支持云端和离线打包。我们只是试验，那就选最简单方便的云端打包吧：
预先要在HBuilder上注册，不然不能打包。
正在上传、正在制作。。。等待1、2分钟
傲游截图39.png
好了，程序会自动下载apk文件，大小很小，才2.76MB
傲游截图34.png
5. App安装到手机
二话不说，安装！
手机上出现程序图标(netEaseMusic)了：
迫不及待地打开程序netEaseMusic：
这个打包后的原生App，很流畅，功能基本正常。只是部分布局、间距、大小跟WebApp比，变了一些！！
内存占用还好，80几MB：
此番尝试，证明Vue+UI，快速开发Web应用，然后打包成原生安卓App，是可行的！
当然，这个国产的软件，捆绑了360，我做完试验后，马上清理了。
期待Weex！
国外这个老牌Codova更正规一点：
DIY 一个自己的音乐播放器 - 前端 - 掘金前言：在最近的一个外包项目中包联盟(PC端)中使用到了video，遇到了好多坑。突发奇想来踩一踩audio的坑?，果然一入深似海，?下面将分享我的DIY之路-Vue音乐播放器。注：本项目为开源项目，不能用于商业应用，仅供学习。...
(译) 使用 Vue.js 和 Axios 从第三方 API 获取数据 — SitePoint - 前端 - 掘金更多的往往不是，建立你的JavaScript应用程序时，你会想把数据从远程源或消耗一个[ API ]（https：/ /恩。维基百科。org /维基/ appl...
转载自：查看原文 2007年W3C（万维网联盟）立项HTML5，直至2014年10月底，这个长达八年的规范终于正式封稿。 过去这些年，HTML5颠覆了PC互联网的格局，优化了移动互联网的体验，接下来，HTML5将颠覆原生App世界。这听起来有点危言耸听，但若认真分析HTML...
低仿饿了么 H5 - 纯前端 Vue 版 + 手把手教学 - 前端 - 掘金低仿饿了么H5-纯前端Vue版+手把手教学 这是一个低仿饿了么H5的纯前端练手，数据是伪造的，写的比较粗糙，写这个的目的是为了加深一下熟练度，半年前看到别人写的仿cnodejs网站，我也用vue1仿...
javascript 正则表达式总结 - 前端 - 掘金为什么要使用正则表达式 正则表达式通过由普通字符和特殊字符组成的文字模板完成对字符串的校验，搜索，替换。在javascript中类似这样 ... 平时自己项目中用到的 CSS - 掘金css有些属性容易忘记，半天不写就...
还以为自己已经有所淡然了， 没想到说出一些话，还是会令眼眶湿润
今天我去惠东喝一个朋友的喜酒。晚上吃饭，我坐的那一桌全部都是这边本地人，说潮汕话的，我一句话也插不上，也没有听懂在说什么，只能看他们的表情和动作，猜测他们说的玩笑。 以前我遇到这种情况，会觉得很无情的。后来，我觉得应该转换想法。如果置身于完全陌生的语言环境中，那听不懂也没有...
自从师兄发给了号召，让我们这些看完了他的书的人去写点读后感什么的，就一直在心里想着去写点什么。虽然一直都有写日记和笔记的习惯，但是读后感这种我是从小到大都写不好的，希望大家不要嫌弃（嫌弃我也不管了）。
首先介绍一下我自己。我是一个大学生，每个月都有固定的开销，由于各...
不喜欢因为节日就必须停止我正在做的事情。。。 德鲁克给吉姆.柯林斯的建议“如果你做了一件不合时宜的事情，就好比你开始饲养那头野兽。如果总是想着怎样才能喂饱这头野兽，你就顾不上去想如何产生好的想法，结果你的影响力就会下降，即便你在商业上获得了成功” 真正的考验，在于对错误的机...15:05 提问
怎么用hbuilder做移动APP登录功能
部门编号、部门口令登录界面
登录成功后显示：部门信息（部门名称、部门联系方式、部门编号），登录不成功提示错误原因。注:浏览器锁定，如果用户用ie内核的浏览器登录提示下载Chrome浏览器，登录界面不显示
后台是用eclipse，Java语言。
现在前台用hbuilder做出界面了，后台用eclipse也能查到数据库数据了，就是不会将它们两连起来，不知道怎么用Java进行登录验证，第一次用hbuilder，还是个新手，请各位大神帮帮忙，最好有做出完整的项目看一下，百度查了许多，没有代码和具体的操作步骤，说的都是思路看不懂。。。
按赞数排序
具体可参考:
前辈你好，我目前也是遇到和你一样的情况，能指导一下小弟我吗？你是怎么解决的....
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐利用HBuilder打包前端开发webapp为apk的方法
转载 &更新时间：日 10:54:41 & 作者：crazywoniu
下面小编就为大家带来一篇利用HBuilder打包前端开发webapp为apk的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
现在的前端开发可谓是，百花齐放啦，什么都可以做，只有想不到没有做不到的，今天就简单的介绍用vue，ng或者是react开发的单页应用如何打包为apk，在移动设备上运行。
这里以vue为例，其他的差不多，大家可以根据自己的情况去查找相应资料。
第一步，需要安装node，如果是做前端的er，这个应该就不用过多介绍了。
第二步，使用vue-cli工具初始化vue项目，这里只是做一个测试的项目，所以vue-router等东西就不用安装了，实际项目，根据具体情况而论。
第三步，常规的开发，比如希望实现的功能等。
第四步，开发完成后需要配置项目为线上项目前的几个配置，如下：
上面主要是打包前的配置。
第五步，打包项目。
第六步，打开HBuilder开始打包为apk。文件-》打开目录，选择刚刚项目的dist目录，项目名称随便，这里就为dist
在项目上右键转成移动项目
当项目的图片上显示为a时就可以了。接下来就是设置启动的图标等信息了，直接点击json的文件就会有设置界面
然后发行为原声应用
进行相应设置就可以了
打包成功后就可以将apk文件反正到手机上查看效果了。
以上这篇利用HBuilder打包前端开发webapp为apk的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具HBuilder打包App方法(图文教程)
转载 &更新时间：日 08:13:53 & 作者：云悠
下面小编就为大家带来一篇HBuilder打包App方法(图文教程)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写，也可以将已经编写好的项目代码打包为手机APP。
HBuilder提供的打包有云端打包和本地打包两种，云端打包的特点是DCloud官方配置好了原生的打包环境，可以把HTML等文件编译为原生安装包。
1，下载HBuilder，注册并登陆。首先打开“文件”-“新建”-“移动APP”，输入“应用名称”，“位置”可以根据需要自己选择即可，“选择模板”建议选择空模板；
2，新建完成后， 在项目管理器会显示新建的项目目录，其中css，img，js和index.html这几个文件可删可改可替换。
unpackage文件夹是放置app图标和启动界面的图片。
manifest.json文件是移动App的配置文件，用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息，用户可通过HBuilder的可视化界面视图或者源码视图来配置移动App的信息。
3，如果删除了css，img，js文件夹和index.html文件，就把其他自己的项目文件对应复制到文件夹中，注意html文件中的引用路径需要保持正确。
如下图自己拷贝的项目：
4， 文件复制完成后，刷新更新下，双击打开manifest.json文件来配置App。
appid：点击云端获取。版本号：根据需要来编辑。页面入口：默认是index.html，根据自己项目需要，更改APP的启动页面。应用描述：自己随便填。应用是否全屏显示：勾上就全屏显示。
5，图标配置：点击页面下方的图标配置，配置APP显示图标。
1)点击"+"号的正方形方框，选择图标素材的路径找到图标素材，再点击" 自动生成所有图标并替换"按钮，完成图标生成和替换。
2),生成的图标自动在unpackage文件夹下
6，启动图片（splash）配置，点击切换到启动图片配置
1)，启动选项：默认
2)，启动图片设置，根据自己需要是Android还是iOS平台，再根据不同设备对应做出启动图片
3），在unpackage→res文件下新建个文件命名"splash"，把做好的启动图片放到这个文件里面。
4），在启动图片设置里点击"选择"，找到刚放进来的启动图片
7，SDK配置：有需要就配置，没有就默认就行。
8，模块权限配置：有需要就配置，没有就默认就行。
9，页面引用关系：
首先点击“扫描代码”，再点击左边index.html文件
该功能是什么意思：点击左侧html文件，右侧会显示不同的文件，图片等。可以表示左侧html文件加载时所需要的资源。
10，代码视图：在代码视图里查看设置是否正确，确定后ctrl+s保存好。
11，设置好配置选项，正式进入打包阶段
HBuilder里点："发行"-"发行为原生安装包"开始打包
这里介绍一下iOS打包
1），这里如果选择越狱包就不需要苹果证书，一路默认设置就可以打包成功，但是打包的App只能安装在越狱过的手机，没越狱安装不了。
2），如果使用苹果证书，这里推荐一个申请iOS证书的工具 Appuploader。免苹果付费开发者账号，直接使用普通苹果id，就能使用Appuploader申请ios测试证书，打包ipa安装到非越狱设备。
工具的安装网址：http://www.applicationloader.net/blog/zh/72.html
免开发者账号申请iOS证书教程：http://www.applicationloader.net/blog/zh/1073.html
12，提交成功后点击确定，就可以查看App打包状态
等打包成功，就可以点手动下载，通过第三方工具 苹果助手安装到ipad上了。
13，调试和安装模拟器
如果你需要在电脑本机进行调试那就需要安装模拟器，请参考http://ask.dcloud.net.cn/article/151如何安装配置手机模拟器，或者在HBuilder里→→运行→→手机运行→→如何安装配置手机模拟器进入查看。
如果需要安装到手机进行真机调试，把手机用数据线连接到电脑，然后重新启动HBuilder→→运行→→手机运行→→连接上真机。
以上这篇HBuilder打包App方法(图文教程)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}