利用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

 

可參考： http://www.jianshu.com/p/3e3b171179f8

 

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

1，點擊發行，這裏發佈測試apk選擇使用DCloud公用證書，點擊‘打包’

2，正在製做安裝包，製做完成，手動下載

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