使用 HBuilderX 打包 app

目前在作 網站的 app ,是使用 vue 框架寫的，作完了web 端，須要打包成 app ,放到網上供用戶下載，可是本人之前沒有打包過app,在網上找了一些資料，也問了一下同事，竟然成功了，如今將整個打包過程記錄下來，若是有其餘人須要相似的需求，能夠參考以下：

1. 若是你使用的 開發工具不是 HBuilderX ，那須要先下載這個軟件（若是使用的編輯器是這個軟件，就不須要下載了），下載地址以下：

 

2. 打開 HBuilderX ，選中菜單中的 ：文件--->新建--->項目

 

3. 選擇項目類型，新建項目名稱，選擇項目路徑

 

4. 而後在 HBuilderX 項目文件中，你能夠看到一個項目文件以下

 

5. 對我原來的項目進行打包： npm run build，會在  m.1zhanche項目下獲得一個dist 文件夾，文件夾中有兩個文件，直接copy 放到 myApp 中就能夠了

 

 

6. 把 dist 文件夾裏的文件  static 文件夾和index.html 原封不動的拷貝放到 myApp 中

 

7. 獲得以下狀態：

 

8.  配置打包文件  manifest.json,直接點擊便可

8.1 基礎配置：

 

8.2  圖標配置：

 

8.3 啓動圖配置：這裏有 iphone,ipad，android 選項，我這裏只須要android，因此其餘的我就不配置了

 

8.4  sdk 配置：這裏有地圖，分享，支付登陸，推送等，按照實際的東西配置就能夠了，我這裏暫時不考慮，因此不涉及，因此我都沒有配

 

8.5 模塊權限配置，這裏有默認選項，我不知道是什麼意思，因此我沒有動，就按默認的執行

 

8.6 源碼視圖：聽說這裏能夠配置app 頂部的顏色，我如今還不會，因此不動，使用默認的東西

 

9. 點擊發行----->雲打包

9. 按照如下選擇

 

10 點擊上圖中的打包

 

11. 在手機中如今安裝過程：

12. 點擊 myApp 打開：

 

 

這是由於 項目中的 ajax 請求沒有請求到數據，在app 中時，須要使用絕對路徑，在項目中進行如下變動

 

從新打包後：

下載再次安裝完成，打開app 的效果以下：OK 了

以上，爲本次打包的所有過程