详解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中Eval函数的使用说明
Oct 11 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
php实现简单的上传进度条
2015/11/17 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Python3中列表list合并的四种方法
2019/04/19 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python实现动态循环输出文字功能
2020/05/07 Python
python实现图像外边界跟踪操作
2020/07/13 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
农行实习自我鉴定
2013/09/22 职场文书
社区清明节活动总结
2014/07/04 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
内勤岗位职责范本
2015/04/13 职场文书
2015年端午节活动方案
2015/05/05 职场文书