共计 2096 个字符，预计需要花费 6 分钟才能阅读完成。
1. 装置 HBuilder X
首先拜访 DCLOUD 官网 https://www.dcloud.io/ 下载最新的 HBuilder X，这里抉择 App 开发版，下载安装之后，记得注册账号（留神区官网的开发者平台进行实名认证，否则无奈进行打包操作），这里后续会应用到。
<p style=”text-align:center;”> 图 1 - 装置 HBuilder X</p>
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 进行注册，中国区不易申请下来，登录地址 https://developer.apple.com/account/。
(3) 生成对应 IOS 证书和形容文件，具体能够参照本篇文章 https://blog.csdn.net/sinat_35861727/article/details/69990790
(4) 苹果软件签证（超级签，贵但更稳固，不那么容易掉签，一般签便宜但容易掉签。）
(5) 软件散发渠道，个别的散发渠道例如蒲公英 https://www.pgyer.com/、fir.imhttps://www.betaqr.com/ 等（收费的有下载次数限度）所以能够抉择本人搭建，这样能够免去散发的平台老本。
// 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 配置
6. 总结
以上就是 HBuilder X 将 vue 我的项目打包成 webApp 的全部内容，具体操作还须要你们本人下来亲自实际一下，毕竟实际才是测验真谛的唯一标准，如果有什么问题，欢送在下方的评论区留言，这边我看到了会对立回复的，最初，感谢您的浏览，喜爱的话点个赞或珍藏一下。
7 参考文章
https://blog.csdn.net/sinat_35861727/article/details/69990790 // IOS 如何生成 IOS 证书和形容文件