大佬教程收集整理的这篇文章主要介绍了详解Vue webapp项目通过HBulider打包原生APP,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
Vue webapp项目通过HBulider打包原生APP
1、webapp项目已经通过vue-cli搭建的脚手架写好了,然后通过webpack打包成一个部署文件list,如下:
2、打开HBulider,打开目录,选择这个list,项目名称自己更改。(或者直接新建一个app项目,然后把里边的unpackage和manifest这两个保留下来,其他的替换成自己dist文件里边的内容)
这个时候是web项目,需要改为APP项目(如果直接新建的app,请忽略此步)
更改前:
更改后:
3、在HB中打开这个dist,可以看到有@L_758_0@manifest.json的文件。这个文件是用来配置应用信息的。入口文件一定要对应好,我用VUE写的单页应用,所以就一个index.html。
然后配置图标
按着自己项目的要求配置就行了,HB下面列举的很详细。
4、接下来可以通过手机用USB线与电脑连接进行真机调试。(必须通过USB线连接才可以,人家HB不支持什么通过无线连接的方式)windows电脑不用说了,可以用一些360助手什么的就可以解决了。如果你的手机是安卓的,在苹果电脑下面就没那么好搞了。后来通过@L_607_13@加自己的摸索也搞出来。方法就是在苹果电脑上下载一个使用 Android File Transfer这个软件。要收费时,点击试用就可以了。手机上需要打开usb调试,然后选择 内置光盘 就可以与苹果电脑连接了。手机自己也有提示(真的很暖心)
连接成功之后,就可以进行真机调试了。
注:网上很多说自己的VUE项目项目打开一片空白,记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。
@H_616_83@以上是大佬教程为你收集整理的详解Vue webapp项目通过HBulider打包原生APP全部内容,希望文章能够帮你解决详解Vue webapp项目通过HBulider打包原生APP所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。