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

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