1.webapp项目是通过vue-cli构建的支架编写的，然后通过webpack打包成部署文件列表，如下所示：

2.打开HBulider，打开目录，选择此列表，自行更改项目名称。(或者直接创建一个新的应用程序项目，然后将解包和清单保存在里面，并用dist文件中的内容替换其他项目)

此时是web项目，需要改为app项目(如果直接新建APP，请忽略此步骤)

更改前：

变更后：

3.在HB中打开这个dist，可以看到有一个manifest.json文件。该文件用于配置应用程序信息。入口文件必须对应良好。我用VUE写了一个单页应用程序，所以它只是一个index.html。

然后配置图标

只需根据自己项目的要求进行配置，详见下面的HB。

4.接下来，手机可以通过USB电缆与电脑连接，进行实机调试。(必须通过USB电缆连接，但HB不支持无线连接。)不用说，windows电脑可以用360左右的助手什么的解决。如果你的手机是安卓，在苹果电脑下就不会那么容易了。后来通过百度和我自己的探索，我也搞出来了。方法是在苹果电脑上下载一个使用安卓文件传输的软件。要收费，只需点击试用。你需要打开手机上的usb调试，然后选择内置的光盘连接苹果电脑。手机有自己的小技巧(真暖心)

连接成功后，就可以调试真机了。

注：网上很多人说他们的VUE项目是空白的。记得在config下的index.js中更改bulid模块的导出路径。因为index.html的内容都是通过脚本标签导入的，而且你的路径是错误的，所以开头一定是空白的。先看默认路径。

module . exports={ build : { env : } require('。/prod.env ')，index : path . resolve(_ _ dirname '，/dist/index.html ')，资产根路径：resolve (_ _ dirname '，/dist ')，assets子目录：' static '，assets publicpath 3360'/'，productionsourcemap 3360 true，assets publicpath默认为'/'，这是根目录。而我们的index.html和静都在同一个级别目录下。所以把它改成。/'

还有一点需要注意。Hash是src中router/index.js路由配置的默认模式。如果您将它更改为历史模式，它将在打开时为空白。因此，只需将其更改为hash或直接删除模式配置，并让其默认即可。

//mode : ' history '//default has H5，如果真机测试没有问题。那你真的可以把它打包成一个APP。

打包成功后，可以手动下载，也可以直接打开下载目录下载。通过qq或其他方式将此xxxx.apk文件发送到您的手机，然后单击“安装”。够了。

6.最后，在手机上展示效果。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。