1.安装HBuilder X
首先访问DCLOUD官网www.dcloud.io/下载最新的HBuild… X，这里选择App开发版，下载安装之后，记得注册账号（注意去官网的开发者平台进行实名认证，否则无法进行打包操作），这里后续会使用到。
图1-安装HBuilder X
2.创建5+App项目
点击左上角加号选择项目，在选择5+App，输入你的项目名完成新项目的创建。
图2-创建项目
图3-初始项目
3.项目运行
首先删除创建项目中的除unpackage和manifest.json的所有文件，然后打包自己的vue项目，生成对应的dist目录，拷贝dist目录的文件到之前创建的项目中。
注意：
a.vue项目的选hash路由，否则会导致网络资源获取不到进入到文件目录。
b.点击index.html看是否能加载出页面，如果不行就是打包的问题，有页面就执行下面的操作。
图4-真实项目
4.配置manifest.json文件
图5-基础配置
图6-图标配置
图7-启动界面配置
这边模块配置、权限配置、App常用其他设置选择默认就行了。
图8-模块配置
图9-源码视图
5.打包成webApp
a.打包成android apk
图10-android包
点击下载地址，下载android apk安装包
图11-打包信息
图12-程序效果
图13-应用运行
b.打包成IOS ipa
先决条件：
(1) 一台苹果电脑...
(2) 苹果开发者账号（99美元/年），最好使用美国区的Apple ID进行注册，中国区不易申请下来，登录地址developer.apple.com/account/。
(3) 生成对应IOS证书和描述文件，具体可以参照本篇文章blog.csdn.net/sinat_35861…
(4) 苹果软件签证（超级签，贵但更稳定，不那么容易掉签，普通签便宜但容易掉签。）
(5) 软件分发渠道，一般的分发渠道例如蒲公英www.pgyer.com/、fir.imhttp…
// appPlist文件用于分发自己的IOS ipa安装包
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>items</key>
<array>
<dict>
<key>assets</key>
<array>
<dict>
<key>kind</key>
<string>software-package</string>
<key>url</key>
<string>https://gitee.com/Magically/appPlist/blob/master/ios.ipa</string>
</dict>
<dict>
<key>kind</key>
<string>display-image</string>
<key>needs-shine</key>
<key>url</key>
<string>https://jeepkoss.oss-accelerate.aliyuncs.com/image/20191127/a1a441f2962a4c3ead97e5311476e4b4.png</string>
</dict>
</array>
<key>metadata</key>
<dict>
<key>bundle-identifier</key>
<string>io.dcloud.dogexapp</string>
<key>bundle-version</key>
<string>1.0.0</string>
<key>kind</key>
<string>software</string>
<key>subtitle</key>
<string>Dogex</string>
<key>title</key>
<string>Dogex</string>
</dict>
</dict>
</array>
</dict>
</plist>
图14-IOS配置
由于IOS打包运行结果和安卓大同小异，这里就不做过多介绍了...
6.总结
以上就是HBuilder X将vue项目打包成webApp的全部内容，具体操作还需要你们自己下来亲自实践一下，毕竟实践才是检验真理的唯一标准，如果有什么问题，欢迎在下方的评论区留言，这边我看到了会统一回复的，最后，感谢您的阅读，喜欢的话点个赞或收藏一下。
7参考文章
blog.csdn.net/sinat_35861… // IOS如何生成IOS证书和描述文件
