详解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进行拖拽
Jul 20 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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中实现图片的锐化
2006/10/09 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
php中error与exception的区别及应用
2014/07/28 PHP
PHP打印输出函数汇总
2016/08/28 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
Python抽象类的新写法
2015/06/18 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
pow在python中的含义及用法
2019/07/11 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
Python连接Impala实现步骤解析
2020/08/04 Python
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
上海中网科技笔试题
2012/02/19 面试题
武汉瑞得软件笔试题
2015/10/27 面试题
学雷锋献爱心倡议书
2015/04/27 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
Mysql开启外网访问
2022/05/15 MySQL