如何利用HBuilder将Vue webapp项目打包成原生APP？

本文共计755个文字，预计阅读时间需要4分钟。

1. webapp项目已通过vue-cli搭建，脚本编写完成。

2.使用webpack打包成部署文件list。

3.打开HBulider，选择list，项目名自行修改。（或直接新建app项目）

1、webapp项目已经通过vue-cli搭建的脚手架写好了，然后通过webpack打包成一个部署文件list，如下：

2、打开HBulider,打开目录，选择这个list，项目名称自己更改。（或者直接新建一个app项目，然后把里边的unpackage和manifest这两个保留下来，其他的替换成自己dist文件里边的内容）

这个时候是web项目，需要改为APP项目（如果直接新建的app，请忽略此步）

更改前：

更改后：

3、在HB中打开这个dist，可以看到有一个manifest.json的文件。这个文件是用来配置应用信息的。入口文件一定要对应好，我用VUE写的单页应用，所以就一个index.html。

然后配置图标

按着自己项目的要求配置就行了，HB下面列举的很详细。

4、接下来可以通过手机用USB线与电脑连接进行真机调试。（必须通过USB线连接才可以，人家HB不支持什么通过无线连接的方式）windows电脑不用说了，可以用一些360助手什么的就可以解决了。如果你的手机是安卓的，在苹果电脑下面就没那么好搞了。后来通过百度加自己的摸索也搞出来。方法就是在苹果电脑上下载一个使用 Android File Transfer这个软件。要收费时，点击试用就可以了。