1. 程式人生 > >hbulid打包vue

hbulid打包vue

之前寫過不少移動APP專案,但是平時寫的Vue-cli專案都只在瀏覽器開發執行的,今天稍微寫一下使用Hbulid打包Vue-cli專案生成APK的大致流程吧
1.準備已有的Vue-cli搭建的webAPP專案
確保 npm run dev 命令能正常執行
確保專案正常執行、預覽、無報錯
2.修改配置檔案的生成路徑
在專案的config資料夾中找到index.js檔案
在改檔案中找到assetsPublicPath,路徑設定為 assetsPublicPath: ‘./’,
3.生成編譯後的檔案
在命令列執行 npm run dev 命令
可以看到在專案中生成了dist資料夾 

4.新生成的資料夾以專案的方式開啟
在工具欄中選擇檔案–開啟目錄–(選擇dist資料夾所在路徑)–給專案命名 
 
此時可以看到在工程欄檢視如下,此時VueTest資料夾左側是“W”圖示 

5.右擊工程資料夾–轉換成移動APP
此時該工程資料夾的左側圖示變為了“A”,即移動APP專案 

6.真機執行或者發行APK
連線手機或者點選模擬器就可以真機運行了
在工具欄選擇“發行”–發行為原生安裝包 

7.APP打包配置
點擊發行為原生安裝包後(我這裡選擇Android系統),選擇“使用Dcloud公用證書”,點選打包 

8.檢視打包狀態並手動下載APK
點選打包後檢視如下 

稍等片刻後即可完成APK的製作並且可以下載使用啦