IT培訓(xùn)-高端面授IT培訓(xùn)機(jī)構(gòu)
        
          
            云和教育：云和數(shù)據(jù)集團(tuán)高端IT職業(yè)教育品牌
            
        
          
    
          

          



          
    
          
        
          
                        
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        
          
        
          
            
          
                
          
                    
            
                        
          • 
                            國(guó)家級(jí)
            全民數(shù)字素養(yǎng)與技能培訓(xùn)基地            
                        
            • 
                        
          • 
                            河南省
            第一批產(chǎn)教融合型企業(yè)建設(shè)培育單位            
                        
            • 
                        
          • 
                            鄭州市
            數(shù)字技能人才（碼農(nóng)）培養(yǎng)評(píng)價(jià)聯(lián)盟            
                        
            • 
                        
                    
          
                
          
            
          
        
          
    
          

          





          

          
    
          
        
                
          
            
          教程 | Vue移動(dòng)端項(xiàng)目如何打包成APP?
          
            
            
                
          • 
                    
            發(fā)布時(shí)間：
            
                    
            2020-12-21
            
                
            • 
                
          • 
                    
            版權(quán)所有：
            
                    
            云和教育
            
                
            • 
                
          • 
                    
            分享：
            
                    
            
                        
                        
            
                            
                            
                            
                            
                            
                            
                            
                        
            
                        
                        
                    
            
                
            • 
            
          
            
          
                
          

          導(dǎo)語(yǔ)：
          
在vue項(xiàng)目開(kāi)發(fā)完成后，如果你想把項(xiàng)目打包成一個(gè)APP，那么本文你一定要收藏！不需要復(fù)雜的操作，只需要點(diǎn)點(diǎn)手指，就可以啦！快來(lái)看看吧！
          

          

          1，把vue項(xiàng)目打包成dist目錄
          

          我們先將項(xiàng)目目錄下config文件內(nèi)index.js中
          

          assetsPublicPath修改為 assetsPublicPath: ‘./’
          

          然后打包成dist文件夾，在cmd輸入以下命令
          

          

            

          • 

          

          npm run build1
          

          

          你就可以得到下面這個(gè)文件夾
          

          

          2，下載Hbuilder
          

          

          然后在Hbuilder中打開(kāi)dist目錄，我們可以得到下圖
          

          

          3，打包成app
          

          接著我們右擊這個(gè)dist目錄，選擇轉(zhuǎn)化為移動(dòng)app
          

          這時(shí)候就會(huì)出現(xiàn)一個(gè)manifest.json，點(diǎn)擊
          

          

          

          這里你可以選擇啟動(dòng)圖配置，選擇你喜歡的啟動(dòng)圖，也可以跳過(guò)。
          

          大部分的設(shè)置都可以默認(rèn)，跳過(guò)
          

          最后
          

          

          對(duì)了，因?yàn)関ue項(xiàng)目沒(méi)辦法檢測(cè)這個(gè)手機(jī)物理返回鍵，所以我們可以在index.html文件中修改一下，很簡(jiǎn)單
          

          

          <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>123</title>
<link href=./static/css/app.8203cae5dd59c366dbd3e59555e22b0b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript>document.addEventListener('plusready', function(a) 
{ //等待plus ready后再調(diào)用5+ API：                   在這里調(diào)用5+ API                  var first = null;
                  plus.key.addEventListener('backbutton', function() 
{ //監(jiān)聽(tīng)返回鍵                          //首次按鍵，提示‘再按一次退出應(yīng)用’                          
if (!first) {                              
first = new Date().getTime(); //獲取第一次點(diǎn)擊的時(shí)間戳                              
// console.log('再按一次退出應(yīng)用');//用自定義toast提示最好                              
// toast('雙擊返回鍵退出應(yīng)用'); //調(diào)用自己寫(xiě)的吐絲提示 函數(shù)                             
 plus.nativeUI.toast("雙擊退出", {duration:'short'}); //通過(guò)H5+ API 調(diào)用Android 上的toast 提示框
                              setTimeout(function() {                                 
 first = null;                              }, 1000);                          } 
else {                             
 if (new Date().getTime() - first < 1000) { //獲取第二次點(diǎn)擊的時(shí)間戳, 兩次之差 小于 1000ms 說(shuō)明1s點(diǎn)擊了兩次, 
                                 plus.runtime.quit(); //退出應(yīng)用                              } 
                         }                      }, false);              });</script>
<script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script>
<script type=text/javascript src=./static/js/vendor.48ebd8a571039a26aa74.js></script>
<script type=text/javascript src=./static/js/app.202646c89ad3a0f4e2e1.js></script>
</body></html>
          

          

          直接復(fù)制貼上去就行了。
          

          點(diǎn)擊導(dǎo)航欄的發(fā)行，選擇云打包
          

          

          廣告可以去掉，點(diǎn)擊打包。
          

          

          打包完成，下載到手機(jī)，就可以安裝使用了。
          

          

          

          云和數(shù)據(jù)作為一個(gè)深耕IT職業(yè)教育多年的教育者，目前的課程涵蓋云計(jì)算、大數(shù)據(jù)、人工智能、虛擬現(xiàn)實(shí)、軟件工程、用戶體驗(yàn)設(shè)計(jì)、網(wǎng)絡(luò)安全、電子商務(wù)等八大方向，結(jié)合企業(yè)實(shí)際用人需求，只為培養(yǎng)更多高端IT技術(shù)人才。