详解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 混淆加密收藏
Jan 16 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
动态加载jQuery的方法
Jun 16 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
如何提高Dom访问速度
Jan 05 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
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
BBS(php & mysql)完整版(七)
2006/10/09 PHP
社区(php&&mysql)三
2006/10/09 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
php文件包含的几种方式总结
2019/09/19 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
javascript实现画板功能
2020/04/12 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
Vue多选列表组件深入详解
2021/03/02 Vue.js
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
Python语言进阶知识点总结
2019/05/28 Python
anaconda如何查看并管理python环境
2019/07/05 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
区长工作作风个人整改措施
2014/10/01 职场文书
优秀班集体申报材料
2014/12/25 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
计划生育目标责任书
2015/05/09 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
golang 实现两个结构体复制字段
2021/04/28 Golang
JavaScript的Set数据结构详解
2022/02/18 Javascript
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android