天天看點

使用Hbuilder把vue項目打包成app

一.前期準備

1.注冊并激活賬号:https://dev.dcloud.net.cn/

2.下載下傳Hbuilder:https://www.dcloud.io/hbuilderx.html

下載下傳有兩個版本,新版本無法轉app,是以最好下載下傳兩個,老版本轉app,新版本配置發行,老版本配置不友善而且無法使用公共證書

使用Hbuilder把vue項目打包成app

二.代碼打包

1.打開指令視窗進入項目npm run build

2.把打包的檔案拖到Hbuilder(老版本)裡面右鍵轉換成app,W變成A

使用Hbuilder把vue項目打包成app

3.manifest.json檔案配置,由于老版本Hbuilder不能使用公共證書,我吧檔案拷貝到新版本裡面配置發行的

點選manifest.json檔案會看到可視化配置界面:

使用Hbuilder把vue項目打包成app

3.1基礎配置:appid預設有的,如果從其他地方拿的包要重新發行需要重新擷取appid,否則無法發行,還有橫豎屏設定根據項目需求

3.2.圖示配置:app圖示,本地上傳後點選自動生成所有圖表并替換,根據ui需求配置

3.3.沒有特别需求可以不用配置

SDK,權限,app常用配置根據項目需求配置,沒有特别需求可以不用配置

三.運作發行

1.運作選中入口檔案index.html選擇運作,看看頁面顯示是否正常

使用Hbuilder把vue項目打包成app

2.發行

2.1運作沒問題以後,選擇要發行的包點選發行->原生App雲打包

使用Hbuilder把vue項目打包成app

2.2打包,因為沒有證書,選擇公共測試證書(隻做了基本配置)

使用Hbuilder把vue項目打包成app