详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)


Posted in Javascript onFebruary 02, 2019

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

详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

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

详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

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

详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

更改前:详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

更改后: 详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

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

详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

然后配置图标

详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

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

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

详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

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

详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

注:网上很多说自己的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+webpack+HBulider)

详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

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

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

详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)

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

Javascript 相关文章推荐
Javascript & DHTML 实例编程(教程)基础知识
Jun 02 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
vue实现表单录入小案例
Sep 27 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 #Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 #Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 #Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 #Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 #Javascript
Electron 如何调用本地模块的方法
Feb 01 #Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 #Javascript
You might like
世界收音机发展史
2021/03/01 无线电
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php处理带有中文URL的方法
2016/07/11 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
php图像验证码生成代码
2017/06/08 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
Python lambda函数基本用法实例分析
2018/03/16 Python
python3.x实现发送邮件功能
2018/05/22 Python
python模块导入的细节详解
2018/12/10 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
连锁酒店店长职责范本
2014/02/13 职场文书
工地安全标语
2014/06/07 职场文书
中学教师个人总结
2015/02/10 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
Python  lambda匿名函数和三元运算符
2022/04/19 Python
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS