Hbulid打包vue-cli專案生成APK
阿新 • • 發佈:2019-01-31
之前寫過不少移動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的製作並且可以下載使用啦