以打包vue3.0项目为例，大致分为以下几步
- 预览打包项目
- 打包vue项目
- 打包App
预览打包项目
hbuilderx里边新建一个项目：新建-->5+App(A)-->选择模板-->默认模板,如图：
新建完成之后，根目录下会有四个文件夹(css,js,img,unpackage)和两个文件(index.html,manifest.json)，打开index.html，会发现里边有如下代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <script type="text/javascript"> document.addEventListener('plusready', function(){ //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。" }); </script> </head> <body> </body> </html>
就像注释里说的，想使用原生方法，就需要在plusReady之后执行，现在在该方法里写一句话：
plus.webview.create("http://192.168.16.9:8891").show();
意思就是在App里边新建一个webview打开你的vue项目，地址写入你的vue访问地址。
本质上，打包类似的项目其实就是安卓壳子新建一个webview，让项目在webview上运行，webview就是一个安卓内置浏览器。
至此基座预览就好了，然后把安卓手机插上，打开USB调试等功能，现在菜单栏-->运行-->运行到手机或模拟器-->xxx，xxx就是你的手机，点击之后，看控制台就开始编译你的项目了，然后你的手机上会出现名为hbuilderx的基座App，hbuilderx编译好之后会自动打开这个基座，你就可以看下在真机上跑的情况了。 如果你想使用浏览器调试你的基座App，有两种方式：
- 在hbuilderx中，
菜单栏-->运行-->运行到手机或模拟器-->xxx的下面有一个显示webview控制台，它是个比较消耗内存的功能，可能会有点卡，不过可以用。当基座App可以运行的时候，打开webview调试，会出现下面这个图：
找到那个http://开头的，点击会出现一个Remote debug的页面，你在手机上操作任何功能，它都会同步。
调试dom，console控制台，打断点，网络请求，缓存等等，功能都可以使用。如果这个remote debug打不开，可以重试，再不行，可以试试第二种。2. 当基座项目跑起来之后，谷歌浏览器输入chrome://inspect/#devices，就是外置的设备连接情况，如图：
同样，点击inspect就可以调试了。一般情况下我都是用第一种，第二种有时候会出现问题……。
打包vue项目
vue项目build好之后，找到dist文件夹，复制里边所有内容。这里注意，vue打包时，可能需要切换请求地址为线上的，也可以用本地的。
不建议使用本地的，因为本地连接的服务经常重启，如果不做正式发行包，也可以打出来当个测试版本，看看有什么问题。
打包App
新建一个hbuilderx项目，步骤同上，然后只留下unpackage文件夹和manifest.json，其它都没有用，把vue复制好的文件，全部扔到这个里边，有些注意事项先提一下：
- 项目请求地址，记得改（根据需求）
- 还记得那个
plusReady方法么，index.html文件编辑一下
window.plusready = false; // 离线打包需要这段代码 // 扩展API是否准备好，如果没有则监听“plusready"事件 if (window.plus) { plusReady(); } else { document.addEventListener("plusready", plusReady, false); } // 扩展API准备完成后要执行的操作 function plusReady() { // const ws = plus.webview.currentWebview(); window.plusready = true; }
类似的逻辑，写到index.html的script标签里边，如果用到原生的方法了，这一段必须要。 当然，如果你的项目里边同样用到了plus.的原生方法，最好也判断一下:
if (!window.plus) { return; }
如果你的项目需要使用plus原生方法，在plus加载完毕后调用，可以使用的API地址传送门。
我使用了内存，因为内存容量无限，不过也要考虑性能，毕竟只是个浏览器。
提几个可能会碰到的点：
- 本地图片是不可以用的，会报一个错误：
Not allowed to load local resource,不管我怎么样转获取到的文件地址，反正最后都会报这个错。查到的资料是需要改一个webview的方法好像，所以还是用了input，event什么的，图片转base64，存本地，因为项目里边缓存要用，哎。 - 不同的手机，
localStorage容量是不一样的，我用plus的存储就是因为localStorage欺骗了我，webview的localStorage内存并不是5M,我忘了资料的地址了，看到的就是localStorage容量webview只有2.5M,手机不一样，容量也不一样。
扯这么多，现在开始打包App，打包之前最后说一个东西：manifest.json，App的配置信息，不用怎么动，换个图标应该就差不多了，如果想做升级的话，记得在基础配置应用版本名称和应用版本号做好数字排序。接下来，项目右键-->发行-->原生App-云打包，填写信息，没有证书的上面有一个制作指南，参照着就可以（也可以使用DCloude，公司有证书，那就使用自有证书好了）。 打包，耐心等待控制台返回下载地址，over。
现在的App，想看请求的话，就用charles等抓包工具看喽。
归根结底，它只是个webview，它只是个孩子啊！！！
