详解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 表单验证常见正则
Sep 28 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
jquery 手势密码插件
Mar 17 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
比较node.js和Deno
Apr 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
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
js实现随机点名
2021/01/19 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
python实现通过shelve修改对象实例
2014/09/26 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
python实现画一颗树和一片森林
2018/06/25 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
python多线程使用方法实例详解
2019/12/30 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
护理专业毕业生自荐信范文
2014/01/05 职场文书
走进毛泽东观后感
2015/06/04 职场文书
python之基数排序的实现
2021/07/26 Python
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python