详解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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
详解js中let与var声明变量的区别
Apr 05 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
php动态变量定义及使用
2015/06/10 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
学习jQuey中的return false
2015/12/18 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
阿甘正传观后感
2015/06/01 职场文书
教师远程培训心得体会
2016/01/09 职场文书
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
Python实现归一化算法详情
2022/03/18 Python
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server