详解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 vvorld 在线加密破解方法
Nov 13 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
vue中post请求以a=a&b=b 的格式写遇到的问题
Apr 27 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 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
PHP的开合式多级菜单程序
2006/10/09 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
计算机应用职专应届生求职信
2013/11/12 职场文书
军训自我鉴定100字
2014/02/13 职场文书
给老婆道歉的话
2015/01/20 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
用python实现监控视频人数统计
2021/05/21 Python
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python