乐趣区

关于前端:HBuilder打包Vue项目并发布

jiezi

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 证书和形容文件

退出移动版