vue 項目通過 HBuilderX 打包成 apk 移動安裝包教程

在使用vue寫一些移動端（安卓端）網頁的時候 總感覺在用戶體驗方面不太好，原因有幾點，

1.首先在用戶需要訪問的時候必須去輸入框填寫你URL地址，像一些內部用的系統一般 網站名也不太容易記，而且不想PC端的瀏覽器 方便輸入。

總之就是懶的去輸入，程序員的通病嘛 就是能用簡單的絕不搞複雜的，那就廢話不多說了，現在使用vue 寫頁面越來越廣泛，如果在找工作的時候說自己不會vue,甚至不知道vue 是什麼的  那就真的是讓人笑掉大牙了。

其實爲什麼使用的人這麼多，當然是有優點的了，首先在通過vue項目打包成 APP 然後進行使用  不乏也是一種樂趣，也解決掉了一些常見的手機端頁面的問題，而且他的學習成本低簡單易學。下面就讓我們進入正題。

 

1.首先你要準備一個vue的項目  然後進行配置  找到目錄 config-->index.js裏面的 build:下的 assetsPublicPath="/"  修改爲

assetsPublicPath="./" 然後進行打包  npm run build

他會生成一個 dist目錄   準備好以後備用

2.打開HBuilderX  新建一個項目  選擇5+APP  起一個項目名稱點擊創建

 

3.這時候你會看到你的項目上有一個5+的符號如：

4.將vue 打好包的項目複製到該項目下 將剛創建好的項目下的index.html 替換掉 效果如下

5.可以將 沒用的文件刪掉 如下：

6.點擊manifest.json  可以配置一下基本

打開源碼視圖，在 plus 下 添加一個json代碼

  "statusbar" : {
            //應用可視區域到系統狀態欄下透明顯示效果
            "immersed" : true
        },

 "plus" : {  
"statusbar" : {
            //應用可視區域到系統狀態欄下透明顯示效果
            "immersed" : true
        },

7.現在就是打包了點擊發行後會有一個原生APP雲打包

 

8.出現APP雲端打包配置 直接使用 Android  使用 DCloud公用證書，可以把廣告去掉：如圖

9.坐等打包完成 打包完成需要時間，請耐心等候，打包完成後會給你生成一個下載地址，要注意這個下載地址是有5次限制的

請先下載完成後保存下來安裝包，可以上傳到服務器上，日後可以無限制下載了。

 

以上就是整個的操作教程，簡單易學，方便快捷 你值得擁有，如果對這個小教程還感興趣，或者有不懂地方歡迎點贊和留言