利用HBuilder將vue項目打包成移動端app


事先准備,開發完成的web app項目(也可以利用vue-cli腳手架構建vue模板項目),npm run dev可以正常預覽的項目

 

1,將項目目錄下config文件內index.js中assetsPublicPath修改為 assetsPublicPath: './'

2,執行npm run build之后生成dist文件夾

3,打開HBuilder,文件->打開目錄,如下圖

選擇剛才生成的dist目錄,輸入項目名稱,點擊完成

附HBuilder下載地址:http://www.dcloud.io/

3,此時會看到HBuilder項目下多了一個W標識(表示web項目)的myApp項目,

 

右鍵菜單選擇‘轉換成移動‘轉換成移動App’,然后‘myApp’前面的標識就變成了‘A’,至此就已經轉換成移動app了,

隨后就可以利用HBuilder連接真機運行

或者發行成為原生app

 

注意:如果真機運行或模擬器運行報如下錯誤

Uncaught Error: [vuex] vuex requires a Promise polyfill in this browser

 

 

以下為以android apk為例的發行為原生app的步驟

1,點擊發行,這里發布測試apk選擇使用DCloud公用證書,點擊‘打包’

2,正在制作安裝包,制作完成,手動下載

3,將下載的apk安裝到android的手機看效果,以下是放到模擬器中的效果


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM