详解Vue webapp项目通过HBulider打包原生APP


Posted in Javascript onJune 29, 2018

Vue webapp项目通过HBulider打包原生APP

1、webapp项目已经通过vue-cli搭建的脚手架写好了,然后通过webpack打包成一个部署文件list,如下:

详解Vue webapp项目通过HBulider打包原生APP

2、打开HBulider,打开目录,选择这个list,项目名称自己更改。(或者直接新建一个app项目,然后把里边的unpackage和manifest这两个保留下来,其他的替换成自己dist文件里边的内容)

详解Vue webapp项目通过HBulider打包原生APP

这个时候是web项目,需要改为APP项目(如果直接新建的app,请忽略此步)

详解Vue webapp项目通过HBulider打包原生APP

更改前:详解Vue webapp项目通过HBulider打包原生APP

更改后: 详解Vue webapp项目通过HBulider打包原生APP

3、在HB中打开这个dist,可以看到有一个manifest.json的文件。这个文件是用来配置应用信息的。入口文件一定要对应好,我用VUE写的单页应用,所以就一个index.html。

详解Vue webapp项目通过HBulider打包原生APP

然后配置图标

详解Vue webapp项目通过HBulider打包原生APP

按着自己项目的要求配置就行了,HB下面列举的很详细。

4、接下来可以通过手机用USB线与电脑连接进行真机调试。(必须通过USB线连接才可以,人家HB不支持什么通过无线连接的方式)windows电脑不用说了,可以用一些360助手什么的就可以解决了。如果你的手机是安卓的,在苹果电脑下面就没那么好搞了。后来通过百度加自己的摸索也搞出来。方法就是在苹果电脑上下载一个使用 Android File Transfer这个软件。要收费时,点击试用就可以了。手机上需要打开usb调试,然后选择 内置光盘 就可以与苹果电脑连接了。手机自己也有提示(真的很暖心)

详解Vue webapp项目通过HBulider打包原生APP

连接成功之后,就可以进行真机调试了。

详解Vue webapp项目通过HBulider打包原生APP

注:网上很多说自己的VUE项目项目打开一片空白,记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。

module.exports = {
 build: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  productionSourceMap: true,

assetsPublicPath默认的是  ‘/'  也就是根目录。而我们的index.html和static在同一级目录下面。  所以要改为  ‘./ '

另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。

// mode: 'history' // 默认hash

5、如果真机测试没有问题。那么就可以真正的进行打包成APP了。

详解Vue webapp项目通过HBulider打包原生APP

详解Vue webapp项目通过HBulider打包原生APP

详解Vue webapp项目通过HBulider打包原生APP

详解Vue webapp项目通过HBulider打包原生APP

详解Vue webapp项目通过HBulider打包原生APP

打包成功后,可以通过手动下载,或者直接打开下载目录里边下载好的。把这个xxxx.apk文件通过qq或者其他的发送到你的手机上,点击安装。就可以了。

6、最后,展示一下手机上的效果。

详解Vue webapp项目通过HBulider打包原生APP

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的new使用
Mar 20 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 #Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 #Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 #Javascript
vue ssr 指南详读
Jun 29 #Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 #jQuery
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 #Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 #Javascript
You might like
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
JQuery之拖拽插件实现代码
2011/04/14 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
Python中装饰器高级用法详解
2017/12/25 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
Python如何存储数据到json文件
2020/03/09 Python
Python 日期与时间转换的方法
2020/08/01 Python
医院总经理岗位职责
2014/02/04 职场文书
双语教学实施方案
2014/03/23 职场文书
征兵宣传标语
2014/06/20 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
2019思想汇报范文
2019/05/21 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
日元符号 ¥
2022/02/17 杂记