vue+hbuilder 打包成移動app

查看了不少網上寫的改來改去都在手機上運行不起來，運行起來又是白屏；最後放棄，本身結合文檔搞吧！

1.

項目目錄下的config文件夾裏的index.js文件中,將build對象下的assetsPublicPath中的「/」，改成「./」後，打包生成的 dist 文件。

註釋：config文件夾裏的index.js中有兩個assetsPublicPath，記住是改 build對象下的 assetsPublicPath

 

完了以後，打包， 執行npm run build以後生成dist文件夾 

 

2.

在新建一個獨立文件夾的項目 ,選擇 H5+app

 

 

 

 

 把新建H5+app裏面不要的css,img，js,index文件先刪除掉，而後把vue打包生成的 dist 文件夾裏面的 static文件複製到 H5+app裏面

 

 

 

 

 

 

 

 

 

 

 

上圖中添加位置的代碼

"statusbar": { //應用可視區域到系統狀態欄下透明顯示效果
            "immersed": true
        },

 

 

 

解決打包成App後，單擊 手機返回鍵退出應用的bug。（能夠直接把這段代碼放到你vue項目中，從新打包，再放回來，也能夠直接修改這個index.html）

 

<script>

 document.addEventListener('plusready', function(a) { //等待plus ready後再調用5+ API：

                //// 在這裏調用5+ API
             var first = null; plus.key.addEventListener('backbutton', function() { //監聽返回鍵 //首次按鍵，提示‘再按一次退出應用’ if (!first) { first = new Date().getTime(); //獲取第一次點擊的時間戳 // console.log('再按一次退出應用');//用自定義toast提示最好 // toast('雙擊返回鍵退出應用'); //調用本身寫的吐絲提示 函數 plus.nativeUI.toast("雙擊退出", {duration:'short'}); //經過H5+ API 調用Android 上的toast 提示框 setTimeout(function() { first = null; }, 1000); } else { if (new Date().getTime() - first < 1000) { //獲取第二次點擊的時間戳, 兩次之差 小於 1000ms 說明1s點擊了兩次, plus.runtime.quit(); //退出應用 } } }, false); }); </script>